@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/stories/Spinner.stories.js

@@ -0,0 +1,396 @@
+"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 CenteredOverlay () {
+        return CenteredOverlay;
+    },
+    get Colors () {
+        return Colors;
+    },
+    get Default () {
+        return Default;
+    },
+    get InButton () {
+        return InButton;
+    },
+    get InCard () {
+        return InCard;
+    },
+    get Sizes () {
+        return Sizes;
+    },
+    get WithText () {
+        return WithText;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _transformers = require("../utilities/transformers.js");
+var _Spinner = /*#__PURE__*/ _interop_require_default(require("../components/Spinner.js"));
+var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
+var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
+var _ = require("../");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var _default = {
+    title: 'Litho/Spinner',
+    component: _Spinner.default,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A Spinner component that provides visual feedback for loading states. Spinners indicate that content is being loaded or an action is being processed."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    },
+    args: {
+        size: 'default'
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        size: {
+            control: 'select',
+            options: [
+                'small',
+                'default',
+                'large'
+            ],
+            description: 'Size variant of the spinner'
+        },
+        color: {
+            control: 'select',
+            options: [
+                'default',
+                'subdued',
+                'highlight',
+                'contrast'
+            ],
+            description: 'Color variant of the spinner'
+        }
+    }
+};
+var Default = {};
+var Sizes = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
+            gap: "8",
+            align: "center",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
+                    gap: "2",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
+                            size: "small"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            children: "Small"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
+                    gap: "2",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
+                            size: "default"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            children: "Default"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
+                    gap: "2",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
+                            size: "large"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            children: "Large"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Spinners come in three sizes: small, default, and large.'
+            }
+        }
+    }
+};
+var Colors = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
+            gap: "8",
+            align: "center",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
+                    gap: "2",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
+                            color: "default"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            children: "Default"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
+                    gap: "2",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
+                            color: "subdued"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            children: "Subdued"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
+                    gap: "2",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
+                            color: "highlight"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            children: "Highlight"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
+                    padding: "4",
+                    background: "surface-dark",
+                    borderRadius: "2",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
+                        gap: "2",
+                        inlineAlign: "center",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
+                                color: "contrast"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "bodySm",
+                                tone: "text-inverse",
+                                children: "Contrast"
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Spinners support different color variants for various contexts.'
+            }
+        }
+    }
+};
+var InButton = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                    loading: true,
+                    children: "Save Changes"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                    loading: true,
+                    secondary: true,
+                    children: "Cancel"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                    loading: true,
+                    destructive: true,
+                    children: "Delete"
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Spinners are commonly used in buttons to indicate loading states.'
+            }
+        }
+    }
+};
+var InCard = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Loading Content",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
+                paddingBlock: "8",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
+                    gap: "4",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
+                            size: "large"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            color: "subdued",
+                            children: "Loading your data..."
+                        })
+                    ]
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Spinners can be used in cards to indicate content is loading.'
+            }
+        }
+    }
+};
+var WithText = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
+            gap: "6",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
+                    gap: "2",
+                    align: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
+                            size: "small"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            children: "Processing..."
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
+                    gap: "2",
+                    align: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {}),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            children: "Loading your dashboard..."
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
+                    gap: "3",
+                    align: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
+                            size: "large"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Uploading files..."
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Spinners can be paired with text to provide context about what is loading.'
+            }
+        }
+    }
+};
+var CenteredOverlay = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Box, {
+            position: "relative",
+            minHeight: "300px",
+            borderWidth: "025",
+            borderColor: "border",
+            borderRadius: "2",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Box, {
+                    padding: "4",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingMd",
+                            children: "Sample Content"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            children: "This content would normally be interactive, but it's currently loading..."
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
+                    position: "absolute",
+                    insetBlockStart: "0",
+                    insetBlockEnd: "0",
+                    insetInlineStart: "0",
+                    insetInlineEnd: "0",
+                    background: "bg-fill-transparent",
+                    borderRadius: "2",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
+                        height: "100%",
+                        width: "100%",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
+                            gap: "4",
+                            inlineAlign: "center",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
+                                    size: "large"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    color: "subdued",
+                                    children: "Loading..."
+                                })
+                            ]
+                        })
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Spinners can be used as overlays to indicate that content is being refreshed.'
+            }
+        }
+    }
+};