@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/stories/Label.stories.js

@@ -0,0 +1,665 @@
+"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 AccessibilityExample () {
+        return AccessibilityExample;
+    },
+    get Colors () {
+        return Colors;
+    },
+    get Default () {
+        return Default;
+    },
+    get Disabled () {
+        return Disabled;
+    },
+    get FontWeights () {
+        return FontWeights;
+    },
+    get FormValidationStates () {
+        return FormValidationStates;
+    },
+    get Hidden () {
+        return Hidden;
+    },
+    get Required () {
+        return Required;
+    },
+    get Variants () {
+        return Variants;
+    },
+    get WithFormFields () {
+        return WithFormFields;
+    },
+    get WithTooltip () {
+        return WithTooltip;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _transformers = require("../utilities/transformers.js");
+var _Label = /*#__PURE__*/ _interop_require_default(require("../components/Label.js"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
+var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
+var _TextField = /*#__PURE__*/ _interop_require_default(require("../components/TextField.js"));
+var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
+var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
+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 _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: 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;
+}
+var _default = {
+    title: 'Litho/Label',
+    component: _Label.default,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A Label component that provides accessible and semantic labeling for form elements. It supports required indicators, tooltips, and various styling options."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    },
+    args: {
+        children: 'Label text',
+        id: 'example-field'
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        children: {
+            control: 'text',
+            description: 'Content to display in the label'
+        },
+        id: {
+            control: 'text',
+            description: 'ID for associating with form elements'
+        },
+        hidden: {
+            control: 'boolean',
+            description: 'Whether the label is visually hidden'
+        },
+        requiredIndicator: {
+            control: 'boolean',
+            description: 'Whether to show required asterisk'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the label appears disabled'
+        },
+        tooltip: {
+            control: 'text',
+            description: 'Tooltip content for the label'
+        },
+        variant: {
+            control: 'select',
+            options: [
+                'bodyXs',
+                'bodySm',
+                'bodyMd',
+                'bodyLg'
+            ],
+            description: 'Text variant for the label'
+        },
+        fontWeight: {
+            control: 'select',
+            options: [
+                'normal',
+                'medium',
+                'semibold',
+                'bold'
+            ],
+            description: 'Font weight for the label'
+        },
+        color: {
+            control: 'select',
+            options: [
+                'subdued',
+                'default',
+                'critical',
+                'warning',
+                'success'
+            ],
+            description: 'Color of the label text'
+        }
+    }
+};
+var Default = {
+    render: function(args) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, _object_spread({}, args));
+    }
+};
+var Required = {
+    args: {
+        children: 'Required field',
+        requiredIndicator: true
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Label with required indicator (asterisk).'
+            }
+        }
+    }
+};
+var WithTooltip = {
+    args: {
+        children: 'Field with help',
+        tooltip: 'This field provides additional information about the user.'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Label with tooltip for additional context.'
+            }
+        }
+    }
+};
+var Hidden = {
+    args: {
+        children: 'Screen reader only label',
+        hidden: true
+    },
+    render: function(args) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, _object_spread({}, args)),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                    children: "The label above is hidden visually but accessible to screen readers."
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Visually hidden label for screen readers.'
+            }
+        }
+    }
+};
+var Disabled = {
+    args: {
+        children: 'Disabled field',
+        disabled: true
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Label in disabled state.'
+            }
+        }
+    }
+};
+var Variants = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                    variant: "bodyXs",
+                    children: "Extra Small Label"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                    variant: "bodySm",
+                    children: "Small Label"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                    variant: "bodyMd",
+                    children: "Medium Label (Default)"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                    variant: "bodyLg",
+                    children: "Large Label"
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Different text variants for labels.'
+            }
+        }
+    }
+};
+var FontWeights = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                    fontWeight: "normal",
+                    children: "Normal Weight"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                    fontWeight: "medium",
+                    children: "Medium Weight"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                    fontWeight: "semibold",
+                    children: "Semibold Weight"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                    fontWeight: "bold",
+                    children: "Bold Weight"
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Different font weights for labels.'
+            }
+        }
+    }
+};
+var Colors = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                    color: "subdued",
+                    children: "Subdued Color"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                    color: "default",
+                    children: "Default Color"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                    color: "critical",
+                    children: "Critical Color"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                    color: "warning",
+                    children: "Warning Color"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                    color: "success",
+                    children: "Success Color"
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Different colors for labels.'
+            }
+        }
+    }
+};
+var WithFormFields = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "User Registration",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                gap: "6",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                                id: "firstName",
+                                requiredIndicator: true,
+                                children: "First Name"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                id: "firstName",
+                                placeholder: "Enter your first name"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                                id: "lastName",
+                                requiredIndicator: true,
+                                children: "Last Name"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                id: "lastName",
+                                placeholder: "Enter your last name"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                                id: "email",
+                                requiredIndicator: true,
+                                tooltip: "We'll use this to send you important updates",
+                                children: "Email Address"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                id: "email",
+                                type: "email",
+                                placeholder: "Enter your email"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                                id: "phone",
+                                children: "Phone Number (Optional)"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                id: "phone",
+                                type: "tel",
+                                placeholder: "Enter your phone number"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                                id: "bio",
+                                tooltip: "Tell us a bit about yourself",
+                                children: "Bio"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                id: "bio",
+                                multiline: 3,
+                                placeholder: "Write a short bio..."
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Labels properly associated with form fields.'
+            }
+        }
+    }
+};
+var FormValidationStates = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Form Validation Examples",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                gap: "8",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "headingSm",
+                                children: "Success State"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "2",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                                        id: "validField",
+                                        color: "success",
+                                        requiredIndicator: true,
+                                        children: "Valid Field"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                        id: "validField",
+                                        value: "john@example.com"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "headingSm",
+                                children: "Error State"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "2",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                                        id: "errorField",
+                                        color: "critical",
+                                        requiredIndicator: true,
+                                        children: "Invalid Field"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                        id: "errorField",
+                                        error: true,
+                                        value: "invalid-email"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "headingSm",
+                                children: "Warning State"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "2",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                                        id: "warningField",
+                                        color: "warning",
+                                        children: "Field with Warning"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                        id: "warningField",
+                                        value: "example@tempmail.com"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "headingSm",
+                                children: "Disabled State"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "2",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                                        id: "disabledField",
+                                        disabled: true,
+                                        children: "Disabled Field"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                        id: "disabledField",
+                                        disabled: true,
+                                        value: "Cannot edit this"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Labels in different validation states with corresponding field colors.'
+            }
+        }
+    }
+};
+var AccessibilityExample = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Accessibility Features",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                gap: "8",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "headingSm",
+                                children: "Proper Label Association"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "4",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                        gap: "2",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                                                id: "accessible-username",
+                                                requiredIndicator: true,
+                                                children: "Username"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                                id: "accessible-username",
+                                                placeholder: "Enter username"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        color: "subdued",
+                                        variant: "bodySm",
+                                        children: "The label is properly associated with the input using the 'for' attribute and matching IDs."
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "headingSm",
+                                children: "Screen Reader Only Label"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "4",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                        gap: "2",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                                                id: "sr-only-field",
+                                                hidden: true,
+                                                children: "Hidden label for screen readers"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                                id: "sr-only-field",
+                                                placeholder: "This field has a hidden label"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        color: "subdued",
+                                        variant: "bodySm",
+                                        children: "The label above is hidden visually but still accessible to screen readers."
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "headingSm",
+                                children: "Label with Additional Context"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "4",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                        gap: "2",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                                                id: "context-field",
+                                                requiredIndicator: true,
+                                                tooltip: "Your API key can be found in your account settings",
+                                                children: "API Key"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                                id: "context-field",
+                                                placeholder: "Enter your API key"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        color: "subdued",
+                                        variant: "bodySm",
+                                        children: "The tooltip provides additional context without cluttering the interface."
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Examples demonstrating accessibility features and best practices.'
+            }
+        }
+    }
+};