@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/stories/Badge.stories.js

@@ -0,0 +1,183 @@
+"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 Attention () {
+        return Attention;
+    },
+    get Critical () {
+        return Critical;
+    },
+    get Default () {
+        return Default;
+    },
+    get Highlight () {
+        return Highlight;
+    },
+    get Info () {
+        return Info;
+    },
+    get ProgressComplete () {
+        return ProgressComplete;
+    },
+    get ProgressIncomplete () {
+        return ProgressIncomplete;
+    },
+    get ProgressPartial () {
+        return ProgressPartial;
+    },
+    get Success () {
+        return Success;
+    },
+    get Warning () {
+        return Warning;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _ = require("../");
+var _default = {
+    title: 'Litho/Badge',
+    component: _.Badge,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: "A Badge component that renders a small, colored label with a status or progress indicator. The badge can be configured with different statuses and progress states."
+            }
+        }
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        status: {
+            control: {
+                type: 'select'
+            },
+            options: [
+                'default',
+                'info',
+                'success',
+                'warning',
+                'critical',
+                'attention',
+                'highlight',
+                'insight',
+                'neutral'
+            ],
+            description: 'Status variant to style the badge',
+            table: {
+                type: {
+                    summary: 'string'
+                },
+                defaultValue: {
+                    summary: 'neutral'
+                }
+            }
+        },
+        progress: {
+            control: {
+                type: 'select'
+            },
+            options: [
+                'incomplete',
+                'partiallyComplete',
+                'complete'
+            ],
+            description: 'Progress status',
+            table: {
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
+        capitalize: {
+            control: 'boolean',
+            description: 'Capitalize the first letter of the badge',
+            table: {
+                type: {
+                    summary: 'boolean'
+                },
+                defaultValue: {
+                    summary: 'false'
+                }
+            }
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes to apply to the badge'
+        },
+        children: {
+            control: 'text',
+            description: 'Content to display within the badge'
+        }
+    }
+};
+var Default = {
+    args: {
+        children: 'Default'
+    }
+};
+var Success = {
+    args: {
+        status: 'success',
+        children: 'Success'
+    }
+};
+var Info = {
+    args: {
+        status: 'info',
+        children: 'Info'
+    }
+};
+var Warning = {
+    args: {
+        status: 'warning',
+        children: 'Warning'
+    }
+};
+var Critical = {
+    args: {
+        status: 'critical',
+        children: 'Critical'
+    }
+};
+var Attention = {
+    args: {
+        status: 'attention',
+        children: 'Attention'
+    }
+};
+var Highlight = {
+    args: {
+        status: 'highlight',
+        children: 'Highlight'
+    }
+};
+var ProgressIncomplete = {
+    args: {
+        progress: 'incomplete',
+        children: 'Incomplete'
+    }
+};
+var ProgressPartial = {
+    args: {
+        progress: 'partiallyComplete',
+        children: 'Partially Complete'
+    }
+};
+var ProgressComplete = {
+    args: {
+        progress: 'complete',
+        children: 'Complete'
+    }
+};

package/dist/cjs/stories/Banner.stories.js

@@ -0,0 +1,201 @@
+"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 Critical () {
+        return Critical;
+    },
+    get Default () {
+        return Default;
+    },
+    get Info () {
+        return Info;
+    },
+    get NoIcon () {
+        return NoIcon;
+    },
+    get Success () {
+        return Success;
+    },
+    get Warning () {
+        return Warning;
+    },
+    get WithActions () {
+        return WithActions;
+    },
+    get WithDismiss () {
+        return WithDismiss;
+    },
+    get WithSpinner () {
+        return WithSpinner;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _ = require("../");
+var _default = {
+    title: 'Litho/Banner',
+    component: _.Banner,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A Banner component that displays a styled banner with customizable title, status, icon, actions, and dismiss functionality. The banner style and content change based on the provided props, allowing for various statuses and themes."
+            }
+        }
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Banner title'
+        },
+        status: {
+            control: {
+                type: 'select'
+            },
+            options: [
+                'info',
+                'success',
+                'warning',
+                'critical',
+                'attention',
+                'highlight',
+                'insight',
+                'neutral',
+                'default'
+            ],
+            description: 'Banner status/color'
+        },
+        children: {
+            control: 'text',
+            description: 'Additional content to display within the banner'
+        },
+        action: {
+            control: 'object',
+            description: 'Primary action configuration object',
+            table: {
+                type: {
+                    summary: 'BannerAction',
+                    detail: "{\n  content: string;\n  primary?: boolean;\n  disabled?: boolean;\n  loading?: boolean;\n  onAction?: () => void;\n  url?: string;\n}"
+                }
+            }
+        },
+        secondaryAction: {
+            control: 'object',
+            description: 'Secondary action configuration object',
+            table: {
+                type: {
+                    summary: 'BannerAction',
+                    detail: "{\n  content: string;\n  primary?: boolean;\n  disabled?: boolean;\n  loading?: boolean;\n  onAction?: () => void;\n  url?: string;\n  link?: boolean;\n  monochrome?: boolean;\n}"
+                }
+            }
+        },
+        icon: {
+            control: 'object',
+            description: 'Custom icon component to display. If not provided, a default icon is used based on status'
+        },
+        spinner: {
+            control: 'boolean',
+            description: 'Shows a spinner icon instead of a status icon when set to true'
+        },
+        onDismiss: {
+            action: 'onDismiss',
+            description: 'Callback function to handle the banner\'s dismiss action',
+            table: {
+                type: {
+                    summary: '() => void'
+                }
+            }
+        }
+    }
+};
+var Default = {
+    args: {
+        title: 'Default Banner',
+        children: 'This is a default banner with some content.'
+    }
+};
+var Info = {
+    args: {
+        status: 'info',
+        title: 'Information',
+        children: 'This is an informational banner.'
+    }
+};
+var Success = {
+    args: {
+        status: 'success',
+        title: 'Success',
+        children: 'Your action completed successfully!'
+    }
+};
+var Warning = {
+    args: {
+        status: 'warning',
+        title: 'Warning',
+        children: 'Please review the information before proceeding.'
+    }
+};
+var Critical = {
+    args: {
+        status: 'critical',
+        title: 'Error',
+        children: 'There was an error processing your request.'
+    }
+};
+var WithDismiss = {
+    args: {
+        status: 'info',
+        title: 'Dismissible Banner',
+        children: 'This banner can be dismissed.',
+        onDismiss: function() {
+            return console.log('Banner dismissed');
+        }
+    }
+};
+var NoIcon = {
+    args: {
+        status: 'info',
+        title: 'No Icon Banner',
+        children: 'This banner has no icon.',
+        hideIcon: true
+    }
+};
+var WithActions = {
+    args: {
+        status: 'warning',
+        title: 'Action Required',
+        children: 'Please update your payment information.',
+        action: {
+            content: 'Update Payment',
+            onAction: function() {
+                return console.log('Update payment clicked');
+            }
+        },
+        secondaryAction: {
+            content: 'Learn More',
+            onAction: function() {
+                return console.log('Learn more clicked');
+            }
+        }
+    }
+};
+var WithSpinner = {
+    args: {
+        status: 'info',
+        title: 'Spinner Banner',
+        children: 'This banner has a spinner.',
+        spinner: true
+    }
+};