@heymantle/litho 0.0.3 → 0.0.4

package/dist/esm/stories/FooterHelp.stories.js

@@ -0,0 +1,813 @@
+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 _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;
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import FooterHelp from "../components/FooterHelp.js";
+import Text from "../components/Text.js";
+import Card from "../components/Card.js";
+import Link from "../components/Link.js";
+import Button from "../components/Button.js";
+import Page from "../components/Page.js";
+import Box from "../components/Box.js";
+import VerticalStack from "../components/VerticalStack.js";
+import HorizontalStack from "../components/HorizontalStack.js";
+import Grid from "../components/Grid.js";
+import TextField from "../components/TextField.js";
+import Select from "../components/Select.js";
+import { transformStorySource } from "../utilities/transformers.js";
+export default {
+    title: 'Litho/FooterHelp',
+    component: FooterHelp,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A FooterHelp component that provides additional information or guidance to users, typically displayed at the bottom of a page. It features a centered design with an information icon and customizable content in a rounded container."
+            }
+        }
+    },
+    args: {
+        children: 'Need help? Visit our support center.'
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        children: {
+            control: 'text',
+            description: 'The content to display next to the information icon'
+        }
+    }
+};
+export var Default = {
+    render: function(args) {
+        return /*#__PURE__*/ _jsx(FooterHelp, _object_spread({}, args));
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var SimpleText = {
+    args: {
+        children: 'For additional support, contact our help desk.'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Basic footer help with simple text content.'
+            }
+        }
+    }
+};
+export var WithLink = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(FooterHelp, {
+            children: [
+                "Need help? Visit our",
+                ' ',
+                /*#__PURE__*/ _jsx(Link, {
+                    url: "https://help.example.com",
+                    external: true,
+                    children: "support center"
+                }),
+                ' ',
+                "or",
+                ' ',
+                /*#__PURE__*/ _jsx(Link, {
+                    url: "mailto:support@example.com",
+                    children: "email us"
+                }),
+                "."
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Footer help with interactive links to support resources.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var ContactInformation = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(FooterHelp, {
+            children: [
+                "Questions? Call us at",
+                ' ',
+                /*#__PURE__*/ _jsx(Link, {
+                    url: "tel:+1-555-123-4567",
+                    children: "(555) 123-4567"
+                }),
+                ' ',
+                "or email",
+                ' ',
+                /*#__PURE__*/ _jsx(Link, {
+                    url: "mailto:support@company.com",
+                    children: "support@company.com"
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Footer help with contact information including phone and email.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var TroubleshootingTips = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(FooterHelp, {
+            children: [
+                "Having trouble? Try refreshing the page or",
+                ' ',
+                /*#__PURE__*/ _jsx(Link, {
+                    url: "/troubleshooting",
+                    children: "view common solutions"
+                }),
+                ". Still need help?",
+                ' ',
+                /*#__PURE__*/ _jsx(Link, {
+                    url: "/contact",
+                    children: "Contact support"
+                }),
+                "."
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Footer help with troubleshooting guidance and support links.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var DocumentationReference = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(FooterHelp, {
+            children: [
+                "Learn more about this feature in our",
+                ' ',
+                /*#__PURE__*/ _jsx(Link, {
+                    url: "/docs/features",
+                    external: true,
+                    children: "documentation"
+                }),
+                ' ',
+                "or watch our",
+                ' ',
+                /*#__PURE__*/ _jsx(Link, {
+                    url: "/tutorials",
+                    external: true,
+                    children: "video tutorials"
+                }),
+                "."
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Footer help directing users to documentation and learning resources.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var InContextUsage = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(Box, {
+            children: [
+                /*#__PURE__*/ _jsx(Card, {
+                    title: "User Settings",
+                    padded: true,
+                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ _jsxs(Box, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        paddingBlockEnd: "2",
+                                        children: /*#__PURE__*/ _jsx(Text, {
+                                            variant: "bodySm",
+                                            children: "Profile Visibility"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                        gap: "2",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                children: "Public"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                children: "Friends Only"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                children: "Private"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(Box, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        paddingBlockEnd: "2",
+                                        children: /*#__PURE__*/ _jsx(Text, {
+                                            variant: "bodySm",
+                                            children: "Email Notifications"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                        gap: "2",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                children: "All"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                children: "Important Only"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                children: "None"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(FooterHelp, {
+                    children: [
+                        "Need help configuring your settings?",
+                        ' ',
+                        /*#__PURE__*/ _jsx(Link, {
+                            url: "/help/settings",
+                            children: "View our settings guide"
+                        }),
+                        ' ',
+                        "or",
+                        ' ',
+                        /*#__PURE__*/ _jsx(Link, {
+                            url: "/contact",
+                            children: "contact support"
+                        }),
+                        "."
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Footer help used in context below a settings form.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var MultipleFooterHelps = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(VerticalStack, {
+            gap: "8",
+            children: [
+                /*#__PURE__*/ _jsx(Card, {
+                    title: "Account Information",
+                    padded: true,
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "This section contains your basic account details and preferences."
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(FooterHelp, {
+                    children: [
+                        "Having trouble updating your account?",
+                        ' ',
+                        /*#__PURE__*/ _jsx(Link, {
+                            url: "/help/account",
+                            children: "Check our account help guide"
+                        }),
+                        "."
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Card, {
+                    title: "Billing Information",
+                    padded: true,
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Manage your payment methods and billing history here."
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(FooterHelp, {
+                    children: [
+                        "Questions about billing?",
+                        ' ',
+                        /*#__PURE__*/ _jsx(Link, {
+                            url: "/help/billing",
+                            children: "View billing FAQ"
+                        }),
+                        ' ',
+                        "or",
+                        ' ',
+                        /*#__PURE__*/ _jsx(Link, {
+                            url: "mailto:billing@example.com",
+                            children: "email billing support"
+                        }),
+                        "."
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Card, {
+                    title: "Privacy Settings",
+                    padded: true,
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Control your privacy preferences and data sharing options."
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(FooterHelp, {
+                    children: [
+                        "Learn more about our",
+                        ' ',
+                        /*#__PURE__*/ _jsx(Link, {
+                            url: "/privacy",
+                            external: true,
+                            children: "privacy policy"
+                        }),
+                        ' ',
+                        "and",
+                        ' ',
+                        /*#__PURE__*/ _jsx(Link, {
+                            url: "/data-protection",
+                            external: true,
+                            children: "data protection practices"
+                        }),
+                        "."
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Multiple footer help components used throughout a page for section-specific guidance.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var FormCompletionHelp = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(Box, {
+            children: [
+                /*#__PURE__*/ _jsx(Card, {
+                    title: "Business Registration",
+                    padded: true,
+                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Business Name *",
+                                placeholder: "Enter your business name"
+                            }),
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Tax ID Number *",
+                                placeholder: "XX-XXXXXXX"
+                            }),
+                            /*#__PURE__*/ _jsx(Select, {
+                                label: "Business Type *",
+                                placeholder: "Select business type",
+                                options: [
+                                    {
+                                        label: 'LLC',
+                                        value: 'llc'
+                                    },
+                                    {
+                                        label: 'Corporation',
+                                        value: 'corp'
+                                    },
+                                    {
+                                        label: 'Partnership',
+                                        value: 'partnership'
+                                    },
+                                    {
+                                        label: 'Sole Proprietorship',
+                                        value: 'sole'
+                                    }
+                                ]
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(FooterHelp, {
+                    children: [
+                        "Need help with business registration?",
+                        ' ',
+                        /*#__PURE__*/ _jsx(Link, {
+                            url: "/help/business-setup",
+                            children: "View our setup guide"
+                        }),
+                        ' ',
+                        "or",
+                        ' ',
+                        /*#__PURE__*/ _jsx(Link, {
+                            url: "/chat",
+                            children: "chat with an expert"
+                        }),
+                        "."
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Footer help providing assistance for form completion and business setup.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var ErrorRecoveryHelp = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(Box, {
+            children: [
+                /*#__PURE__*/ _jsx(Card, {
+                    padded: true,
+                    children: /*#__PURE__*/ _jsx(Box, {
+                        padding: "8",
+                        children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                            gap: "4",
+                            align: "center",
+                            children: [
+                                /*#__PURE__*/ _jsx(Text, {
+                                    style: {
+                                        fontSize: '3rem'
+                                    },
+                                    children: "⚠️"
+                                }),
+                                /*#__PURE__*/ _jsx(Text, {
+                                    variant: "headingMd",
+                                    alignment: "center",
+                                    children: "Something went wrong"
+                                }),
+                                /*#__PURE__*/ _jsx(Text, {
+                                    alignment: "center",
+                                    children: "We encountered an error while processing your request. Please try again or contact support if the problem persists."
+                                }),
+                                /*#__PURE__*/ _jsx(Box, {
+                                    paddingBlockStart: "4",
+                                    children: /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                        gap: "4",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                primary: true,
+                                                children: "Try Again"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                children: "Go Back"
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(FooterHelp, {
+                    children: [
+                        "Experiencing technical issues?",
+                        ' ',
+                        /*#__PURE__*/ _jsx(Link, {
+                            url: "/status",
+                            children: "Check system status"
+                        }),
+                        ' ',
+                        "or",
+                        ' ',
+                        /*#__PURE__*/ _jsx(Link, {
+                            url: "/help/troubleshooting",
+                            children: "troubleshooting guide"
+                        }),
+                        ". For urgent issues,",
+                        ' ',
+                        /*#__PURE__*/ _jsx(Link, {
+                            url: "tel:+1-555-SUPPORT",
+                            children: "call support"
+                        }),
+                        "."
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Footer help used on error pages to guide users toward recovery options.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var OnboardingHelp = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(Box, {
+            children: [
+                /*#__PURE__*/ _jsx(Card, {
+                    title: "Welcome to Our Platform!",
+                    padded: true,
+                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "6",
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                children: "Let's get you started with a few quick steps to set up your account."
+                            }),
+                            /*#__PURE__*/ _jsxs(VerticalStack, {
+                                gap: "4",
+                                children: [
+                                    /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                        gap: "2",
+                                        blockAlign: "center",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Box, {
+                                                borderRadius: "50%",
+                                                style: {
+                                                    width: '24px',
+                                                    height: '24px',
+                                                    backgroundColor: '#28a745',
+                                                    color: 'white',
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'center',
+                                                    fontSize: '0.8rem'
+                                                },
+                                                children: "✓"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                children: "Complete your profile"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                        gap: "2",
+                                        blockAlign: "center",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Box, {
+                                                borderRadius: "50%",
+                                                style: {
+                                                    width: '24px',
+                                                    height: '24px',
+                                                    backgroundColor: '#007bff',
+                                                    color: 'white',
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'center',
+                                                    fontSize: '0.8rem'
+                                                },
+                                                children: "2"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                children: "Add your first project"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                        gap: "2",
+                                        blockAlign: "center",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Box, {
+                                                borderRadius: "50%",
+                                                style: {
+                                                    width: '24px',
+                                                    height: '24px',
+                                                    backgroundColor: '#ccc',
+                                                    color: 'white',
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'center',
+                                                    fontSize: '0.8rem'
+                                                },
+                                                children: "3"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                children: "Invite team members"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                primary: true,
+                                children: "Continue Setup"
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(FooterHelp, {
+                    children: [
+                        "New to our platform?",
+                        ' ',
+                        /*#__PURE__*/ _jsx(Link, {
+                            url: "/getting-started",
+                            children: "View the getting started guide"
+                        }),
+                        ' ',
+                        "or",
+                        ' ',
+                        /*#__PURE__*/ _jsx(Link, {
+                            url: "/demo",
+                            children: "take a quick tour"
+                        }),
+                        ". Need personal assistance?",
+                        ' ',
+                        /*#__PURE__*/ _jsx(Link, {
+                            url: "/onboarding-support",
+                            children: "Schedule a call"
+                        }),
+                        "."
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Footer help supporting new users during onboarding process.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var FeatureSpecificHelp = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(VerticalStack, {
+            gap: "4",
+            children: /*#__PURE__*/ _jsxs(Page, {
+                title: "Advanced Analytics Dashboard",
+                children: [
+                    /*#__PURE__*/ _jsx(Card, {
+                        title: "Performance Metrics",
+                        padded: true,
+                        children: /*#__PURE__*/ _jsxs(Grid, {
+                            columns: {
+                                xs: 1,
+                                md: 3
+                            },
+                            gap: "4",
+                            children: [
+                                /*#__PURE__*/ _jsx(Box, {
+                                    padding: "4",
+                                    borderWidth: "025",
+                                    borderColor: "border",
+                                    borderRadius: "default",
+                                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                        align: "center",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                variant: "headingLg",
+                                                alignment: "center",
+                                                children: "1,234"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                variant: "bodySm",
+                                                color: "subdued",
+                                                alignment: "center",
+                                                children: "Total Users"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Box, {
+                                    padding: "4",
+                                    borderWidth: "025",
+                                    borderColor: "border",
+                                    borderRadius: "default",
+                                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                        align: "center",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                variant: "headingLg",
+                                                alignment: "center",
+                                                children: "89.5%"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                variant: "bodySm",
+                                                color: "subdued",
+                                                alignment: "center",
+                                                children: "Engagement Rate"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Box, {
+                                    padding: "4",
+                                    borderWidth: "025",
+                                    borderColor: "border",
+                                    borderRadius: "default",
+                                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                        align: "center",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                variant: "headingLg",
+                                                alignment: "center",
+                                                children: "$45.2K"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                variant: "bodySm",
+                                                color: "subdued",
+                                                alignment: "center",
+                                                children: "Revenue"
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(FooterHelp, {
+                        children: [
+                            "Understanding your analytics?",
+                            ' ',
+                            /*#__PURE__*/ _jsx(Link, {
+                                url: "/help/analytics",
+                                children: "Analytics guide"
+                            }),
+                            ' ',
+                            "explains all metrics. Want to create custom reports?",
+                            ' ',
+                            /*#__PURE__*/ _jsx(Link, {
+                                url: "/help/custom-reports",
+                                children: "Learn about custom reporting"
+                            }),
+                            "."
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Footer help providing feature-specific guidance for complex interfaces like analytics dashboards.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};