@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/stories/ProgressBar.stories.js

@@ -0,0 +1,506 @@
+"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 Animated () {
+        return Animated;
+    },
+    get Colors () {
+        return Colors;
+    },
+    get Default () {
+        return Default;
+    },
+    get DifferentStates () {
+        return DifferentStates;
+    },
+    get LowProgress () {
+        return LowProgress;
+    },
+    get Sizes () {
+        return Sizes;
+    },
+    get WithLabels () {
+        return WithLabels;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _transformers = require("../utilities/transformers.js");
+var _ProgressBar = /*#__PURE__*/ _interop_require_default(require("../components/ProgressBar.js"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
+var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
+var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
+var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var _default = {
+    title: 'Litho/ProgressBar',
+    component: _ProgressBar.default,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A ProgressBar component that visually represents the completion of a task or process. Progress bars help users understand how much of a task has been completed."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    },
+    args: {
+        progress: 50
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        progress: {
+            control: {
+                type: 'range',
+                min: 0,
+                max: 100,
+                step: 1
+            },
+            description: 'Progress value as a percentage (0-100)'
+        },
+        size: {
+            control: 'select',
+            options: [
+                'small',
+                'medium',
+                'large'
+            ],
+            description: 'Size variant of the progress bar'
+        },
+        color: {
+            control: 'select',
+            options: [
+                'default',
+                'success',
+                'warning',
+                'critical',
+                'highlight'
+            ],
+            description: 'Color variant of the progress bar'
+        },
+        animated: {
+            control: 'boolean',
+            description: 'Whether to animate the progress bar'
+        }
+    }
+};
+var Default = {};
+var Sizes = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "6",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "2",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            color: "subdued",
+                            children: "Small"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressBar.default, {
+                            progress: 75,
+                            size: "small"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "2",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            color: "subdued",
+                            children: "Medium (Default)"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressBar.default, {
+                            progress: 75,
+                            size: "medium"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "2",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            color: "subdued",
+                            children: "Large"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressBar.default, {
+                            progress: 75,
+                            size: "large"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Progress bars come in three sizes: small, medium (default), and large.'
+            }
+        }
+    }
+};
+var Colors = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "6",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "2",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            color: "subdued",
+                            children: "Default"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressBar.default, {
+                            progress: 60,
+                            color: "default"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "2",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            color: "subdued",
+                            children: "Success"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressBar.default, {
+                            progress: 85,
+                            color: "success"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "2",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            color: "subdued",
+                            children: "Warning"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressBar.default, {
+                            progress: 45,
+                            color: "warning"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "2",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            color: "subdued",
+                            children: "Critical"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressBar.default, {
+                            progress: 15,
+                            color: "critical"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "2",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            color: "subdued",
+                            children: "Highlight"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressBar.default, {
+                            progress: 70,
+                            color: "highlight"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Progress bars support different colors for various semantic meanings.'
+            }
+        }
+    }
+};
+var WithLabels = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "8",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "1",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                            align: "space-between",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "bodyMd",
+                                    children: "Upload Progress"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "bodyMd",
+                                    children: "32%"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressBar.default, {
+                            progress: 32,
+                            color: "highlight"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            color: "subdued",
+                            children: "Uploading file 3 of 8..."
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "1",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                            align: "space-between",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "bodyMd",
+                                    children: "Storage Used"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "bodyMd",
+                                    children: "78%"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressBar.default, {
+                            progress: 78,
+                            color: "warning"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            color: "subdued",
+                            children: "7.8 GB of 10 GB used"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "1",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                            align: "space-between",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "bodyMd",
+                                    children: "Task Completion"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "bodyMd",
+                                    children: "100%"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressBar.default, {
+                            progress: 100,
+                            color: "success"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            color: "subdued",
+                            children: "All tasks completed successfully"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Progress bars are often accompanied by labels showing percentage and context.'
+            }
+        }
+    }
+};
+var DifferentStates = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
+            gap: "8",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                title: "Project Status",
+                padded: true,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "6",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                            gap: "2",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                    align: "space-between",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            children: "Design Phase"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            color: "success",
+                                            children: "Complete"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressBar.default, {
+                                    progress: 100,
+                                    color: "success"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                            gap: "2",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                    align: "space-between",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            children: "Development"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            children: "65%"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressBar.default, {
+                                    progress: 65,
+                                    color: "highlight"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                            gap: "2",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                    align: "space-between",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            children: "Testing"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            color: "subdued",
+                                            children: "Not started"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressBar.default, {
+                                    progress: 0,
+                                    color: "default"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                            gap: "2",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                    align: "space-between",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            children: "Deployment"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            color: "subdued",
+                                            children: "Pending"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressBar.default, {
+                                    progress: 0,
+                                    color: "default"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Progress bars can represent different states of a multi-step process.'
+            }
+        }
+    }
+};
+var Animated = {
+    args: {
+        progress: 75,
+        animated: true,
+        color: 'highlight'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Progress bars can be animated to show active progress.'
+            }
+        }
+    }
+};
+var LowProgress = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
+            gap: "4",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                gap: "1",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                        align: "space-between",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                children: "Disk Space Critical"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                color: "critical",
+                                children: "5%"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressBar.default, {
+                        progress: 5,
+                        color: "critical"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        variant: "bodySm",
+                        color: "critical",
+                        children: "Only 500 MB remaining"
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Progress bars work well for showing critical low values.'
+            }
+        }
+    }
+};