@juspay/blend-design-system 0.0.37-beta.2 → 0.0.37-beta.4

package/lib/components/shared/accessibility/LightHouse-components/CheckboxLightHouse.tsx

@@ -0,0 +1,236 @@
+import { Checkbox, CheckboxSize } from '../../../Checkbox'
+import { Info, AlertCircle } from 'lucide-react'
+
+const CheckboxLightHouse = () => {
+    return (
+        <>
+            {/* Basic Checkbox - Small */}
+            <Checkbox size={CheckboxSize.SMALL}>Small Checkbox</Checkbox>
+
+            {/* Basic Checkbox - Medium */}
+            <Checkbox size={CheckboxSize.MEDIUM}>Medium Checkbox</Checkbox>
+
+            {/* Checked Checkbox */}
+            <Checkbox checked={true}>Checked Checkbox</Checkbox>
+
+            {/* Unchecked Checkbox */}
+            <Checkbox checked={false}>Unchecked Checkbox</Checkbox>
+
+            {/* Default Checked */}
+            <Checkbox defaultChecked={true}>Default Checked</Checkbox>
+
+            {/* Indeterminate Checkbox */}
+            <Checkbox checked="indeterminate">Indeterminate Checkbox</Checkbox>
+
+            {/* Disabled Checkbox */}
+            <Checkbox disabled={true}>Disabled Checkbox</Checkbox>
+
+            {/* Disabled Checked */}
+            <Checkbox checked={true} disabled={true}>
+                Disabled Checked
+            </Checkbox>
+
+            {/* Disabled Indeterminate */}
+            <Checkbox checked="indeterminate" disabled={true}>
+                Disabled Indeterminate
+            </Checkbox>
+
+            {/* Required Checkbox */}
+            <Checkbox required={true}>Required Checkbox</Checkbox>
+
+            {/* Error Checkbox */}
+            <Checkbox error={true}>Error Checkbox</Checkbox>
+
+            {/* Error Checked */}
+            <Checkbox checked={true} error={true}>
+                Error Checked
+            </Checkbox>
+
+            {/* With Subtext */}
+            <Checkbox subtext="This is a subtext description">
+                Checkbox with Subtext
+            </Checkbox>
+
+            {/* With Subtext - Checked */}
+            <Checkbox checked={true} subtext="This is a subtext description">
+                Checked with Subtext
+            </Checkbox>
+
+            {/* With Subtext - Disabled */}
+            <Checkbox disabled={true} subtext="This is a subtext description">
+                Disabled with Subtext
+            </Checkbox>
+
+            {/* With Subtext - Error */}
+            <Checkbox error={true} subtext="This is an error message">
+                Error with Subtext
+            </Checkbox>
+
+            {/* With Slot */}
+            <Checkbox slot={<Info size={16} />}>Checkbox with Slot</Checkbox>
+
+            {/* With Slot - Checked */}
+            <Checkbox checked={true} slot={<Info size={16} />}>
+                Checked with Slot
+            </Checkbox>
+
+            {/* With Slot and Subtext */}
+            <Checkbox
+                slot={<Info size={16} />}
+                subtext="This checkbox has both slot and subtext"
+            >
+                Checkbox with Slot and Subtext
+            </Checkbox>
+
+            {/* Small Size with Subtext */}
+            <Checkbox
+                size={CheckboxSize.SMALL}
+                subtext="Small checkbox subtext"
+            >
+                Small Checkbox
+            </Checkbox>
+
+            {/* Medium Size with Subtext */}
+            <Checkbox
+                size={CheckboxSize.MEDIUM}
+                subtext="Medium checkbox subtext"
+            >
+                Medium Checkbox
+            </Checkbox>
+
+            {/* Required with Subtext */}
+            <Checkbox required={true} subtext="This field is required">
+                Required Checkbox
+            </Checkbox>
+
+            {/* Error with Subtext */}
+            <Checkbox error={true} subtext="Please fix this error">
+                Error Checkbox
+            </Checkbox>
+
+            {/* Disabled with Subtext */}
+            <Checkbox disabled={true} subtext="This checkbox is disabled">
+                Disabled Checkbox
+            </Checkbox>
+
+            {/* With onChange Handler */}
+            <Checkbox
+                onCheckedChange={(checked) => {
+                    console.log('Checkbox changed:', checked)
+                }}
+            >
+                Checkbox with onChange
+            </Checkbox>
+
+            {/* Controlled Checkbox */}
+            <Checkbox
+                checked={true}
+                onCheckedChange={(checked) => {
+                    console.log('Controlled checkbox changed:', checked)
+                }}
+            >
+                Controlled Checkbox
+            </Checkbox>
+
+            {/* Indeterminate with onChange */}
+            <Checkbox
+                checked="indeterminate"
+                onCheckedChange={(checked) => {
+                    console.log('Indeterminate changed:', checked)
+                }}
+            >
+                Indeterminate with onChange
+            </Checkbox>
+
+            {/* With Name */}
+            <Checkbox name="checkbox-name">Checkbox with Name</Checkbox>
+
+            {/* With ID */}
+            <Checkbox id="custom-checkbox-id">Checkbox with ID</Checkbox>
+
+            {/* With Name and ID */}
+            <Checkbox name="checkbox-name" id="custom-checkbox-id">
+                Checkbox with Name and ID
+            </Checkbox>
+
+            {/* Long Label */}
+            <Checkbox>
+                This is a very long checkbox label that demonstrates how the
+                component handles longer text content and wraps properly
+            </Checkbox>
+
+            {/* Long Label with Subtext */}
+            <Checkbox subtext="This is also a long subtext that should wrap properly and maintain good readability">
+                This is a very long checkbox label that demonstrates how the
+                component handles longer text content
+            </Checkbox>
+
+            {/* With MaxLength - Label */}
+            <Checkbox maxLength={{ label: 20 }}>
+                This is a very long label that will be truncated
+            </Checkbox>
+
+            {/* With MaxLength - Subtext */}
+            <Checkbox
+                subtext="This is a very long subtext that will be truncated when it exceeds the max length"
+                maxLength={{ subtext: 30 }}
+            >
+                Checkbox with Truncated Subtext
+            </Checkbox>
+
+            {/* With MaxLength - Both */}
+            <Checkbox
+                subtext="This is a very long subtext that will be truncated"
+                maxLength={{ label: 25, subtext: 30 }}
+            >
+                This is a very long label that will be truncated
+            </Checkbox>
+
+            {/* Complex Checkbox */}
+            <Checkbox
+                checked={true}
+                required={true}
+                slot={<AlertCircle size={16} />}
+                subtext="This is a complex checkbox with all features enabled"
+                size={CheckboxSize.MEDIUM}
+                onCheckedChange={(checked) => {
+                    console.log('Complex checkbox changed:', checked)
+                }}
+            >
+                Complex Checkbox Example
+            </Checkbox>
+
+            {/* All States - Small */}
+            <Checkbox size={CheckboxSize.SMALL}>Small Unchecked</Checkbox>
+            <Checkbox size={CheckboxSize.SMALL} checked={true}>
+                Small Checked
+            </Checkbox>
+            <Checkbox size={CheckboxSize.SMALL} checked="indeterminate">
+                Small Indeterminate
+            </Checkbox>
+            <Checkbox size={CheckboxSize.SMALL} disabled={true}>
+                Small Disabled
+            </Checkbox>
+            <Checkbox size={CheckboxSize.SMALL} error={true}>
+                Small Error
+            </Checkbox>
+
+            {/* All States - Medium */}
+            <Checkbox size={CheckboxSize.MEDIUM}>Medium Unchecked</Checkbox>
+            <Checkbox size={CheckboxSize.MEDIUM} checked={true}>
+                Medium Checked
+            </Checkbox>
+            <Checkbox size={CheckboxSize.MEDIUM} checked="indeterminate">
+                Medium Indeterminate
+            </Checkbox>
+            <Checkbox size={CheckboxSize.MEDIUM} disabled={true}>
+                Medium Disabled
+            </Checkbox>
+            <Checkbox size={CheckboxSize.MEDIUM} error={true}>
+                Medium Error
+            </Checkbox>
+        </>
+    )
+}
+
+export default CheckboxLightHouse

package/lib/components/shared/accessibility/LightHouse-components/CodeBlockLightHouse.tsx

@@ -0,0 +1,180 @@
+import CodeBlock from '../../../CodeBlock/CodeBlock'
+import { CodeBlockVariant, DiffLineType } from '../../../CodeBlock/types'
+
+const CodeBlockLightHouse = () => {
+    return (
+        <div className="flex flex-col gap-8 p-8 min-h-screen">
+            {/* Page Content - Visible to Lighthouse */}
+            <main role="main">
+                <h1>CodeBlock Accessibility Testing</h1>
+                <p>
+                    This page demonstrates the CodeBlock component for
+                    Lighthouse accessibility auditing. Multiple code block
+                    configurations are shown to test various accessibility
+                    features.
+                </p>
+            </main>
+
+            {/* Basic CodeBlock */}
+            <section aria-labelledby="basic-codeblock-heading">
+                <h2 id="basic-codeblock-heading">Basic CodeBlock</h2>
+                <div style={{ padding: '20px' }}>
+                    <CodeBlock
+                        code={`function greet(name) {
+    console.log("Hello, " + name + "!");
+}`}
+                        header="example.js"
+                        showLineNumbers
+                        showCopyButton
+                        language="javascript"
+                    />
+                </div>
+                <p className="text-sm text-gray-600">
+                    Basic code block with line numbers, header, and copy button.
+                    All interactive elements have proper ARIA attributes and
+                    keyboard navigation support.
+                </p>
+            </section>
+
+            {/* CodeBlock without Line Numbers */}
+            <section aria-labelledby="no-line-numbers-heading">
+                <h2 id="no-line-numbers-heading">
+                    CodeBlock without Line Numbers
+                </h2>
+                <div style={{ padding: '20px' }}>
+                    <CodeBlock
+                        code={`const x = 10;
+const y = 20;
+const sum = x + y;`}
+                        header="math.js"
+                        showLineNumbers={false}
+                        showCopyButton
+                        language="javascript"
+                    />
+                </div>
+                <p className="text-sm text-gray-600">
+                    Code block without line numbers. Line number gutters are
+                    hidden from screen readers with aria-hidden="true".
+                </p>
+            </section>
+
+            {/* CodeBlock without Header */}
+            <section aria-labelledby="no-header-heading">
+                <h2 id="no-header-heading">CodeBlock without Header</h2>
+                <div style={{ padding: '20px' }}>
+                    <CodeBlock
+                        code={`{
+  "name": "example",
+  "version": "1.0.0"
+}`}
+                        showHeader={false}
+                        showCopyButton
+                        language="json"
+                    />
+                </div>
+                <p className="text-sm text-gray-600">
+                    Code block without header. The main region has aria-label
+                    describing the code block.
+                </p>
+            </section>
+
+            {/* CodeBlock without Copy Button */}
+            <section aria-labelledby="no-copy-button-heading">
+                <h2 id="no-copy-button-heading">
+                    CodeBlock without Copy Button
+                </h2>
+                <div style={{ padding: '20px' }}>
+                    <CodeBlock
+                        code={`const data = {
+    users: [],
+    count: 0
+};`}
+                        header="data.js"
+                        showLineNumbers
+                        showCopyButton={false}
+                        language="javascript"
+                    />
+                </div>
+                <p className="text-sm text-gray-600">
+                    Code block without copy button. Code content is still
+                    focusable for scrolling and selection.
+                </p>
+            </section>
+
+            {/* Diff View */}
+            <section aria-labelledby="diff-view-heading">
+                <h2 id="diff-view-heading">Diff View</h2>
+                <div style={{ padding: '20px' }}>
+                    <CodeBlock
+                        code=""
+                        variant={CodeBlockVariant.DIFF}
+                        diffLines={[
+                            {
+                                content: 'const old = 1;',
+                                type: DiffLineType.REMOVED,
+                            },
+                            {
+                                content: 'const new = 2;',
+                                type: DiffLineType.ADDED,
+                            },
+                            {
+                                content: 'const unchanged = 3;',
+                                type: DiffLineType.UNCHANGED,
+                            },
+                        ]}
+                        header="version.diff"
+                        showLineNumbers
+                        showCopyButton
+                    />
+                </div>
+                <p className="text-sm text-gray-600">
+                    Diff view showing removed, added, and unchanged lines. Each
+                    side has proper role="group" with aria-label ("Removed
+                    code", "Added code").
+                </p>
+            </section>
+
+            {/* Multiple Languages */}
+            <section aria-labelledby="multiple-languages-heading">
+                <h2 id="multiple-languages-heading">Multiple Languages</h2>
+                <div style={{ padding: '20px' }}>
+                    <div className="space-y-4">
+                        <div>
+                            <h3 className="text-sm font-medium mb-2">
+                                TypeScript
+                            </h3>
+                            <CodeBlock
+                                code={`interface User {
+  name: string;
+  age: number;
+}`}
+                                header="types.ts"
+                                language="typescript"
+                                showLineNumbers
+                                showCopyButton
+                            />
+                        </div>
+                        <div>
+                            <h3 className="text-sm font-medium mb-2">Python</h3>
+                            <CodeBlock
+                                code={`def greet(name):
+    print(f"Hello, {name}!")`}
+                                header="main.py"
+                                language="python"
+                                showLineNumbers
+                                showCopyButton
+                            />
+                        </div>
+                    </div>
+                </div>
+                <p className="text-sm text-gray-600">
+                    Code blocks support syntax highlighting for various
+                    programming languages. All variants maintain accessibility
+                    standards.
+                </p>
+            </section>
+        </div>
+    )
+}
+
+export default CodeBlockLightHouse

package/lib/components/shared/accessibility/LightHouse-components/DrawerLightHouse.tsx

@@ -0,0 +1,254 @@
+import { useState, useEffect } from 'react'
+import {
+    Drawer,
+    DrawerTrigger,
+    DrawerPortal,
+    DrawerOverlay,
+    DrawerContent,
+    DrawerHeader,
+    DrawerTitle,
+    DrawerDescription,
+    DrawerBody,
+    DrawerFooter,
+    DrawerClose,
+} from '../../../Drawer/Drawer'
+import { Button, ButtonType } from '../../../Button'
+import { useId } from 'react'
+
+const DrawerLightHouse = () => {
+    const baseId = useId()
+    const [open1, setOpen1] = useState(false)
+    const [open2, setOpen2] = useState(false)
+    const [open3, setOpen3] = useState(false)
+    const [open4, setOpen4] = useState(false)
+
+    // Open basic drawer automatically after a short delay to ensure page content is painted first
+    // This allows Lighthouse to audit the drawer's accessibility features when it's open
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setOpen1(true)
+        }, 100)
+        return () => clearTimeout(timer)
+    }, [])
+
+    return (
+        <div className="flex flex-col gap-4 p-8 min-h-screen">
+            {/* Page Content - Visible to Lighthouse */}
+            <main role="main">
+                <h1>Drawer Accessibility Testing</h1>
+                <p>
+                    This page demonstrates the Drawer component for Lighthouse
+                    accessibility auditing. The basic drawer will open
+                    automatically and contains accessible elements.
+                </p>
+            </main>
+
+            {/* Basic Drawer - Opens automatically for Testing */}
+            <div style={{ padding: '20px' }}>
+                <Drawer open={open1} onOpenChange={setOpen1}>
+                    <DrawerTrigger>
+                        <Button
+                            buttonType={ButtonType.PRIMARY}
+                            text="Open Basic Drawer"
+                        />
+                    </DrawerTrigger>
+                    <DrawerPortal>
+                        <DrawerOverlay />
+                        <DrawerContent>
+                            <DrawerHeader>
+                                <DrawerTitle id={`${baseId}-title-1`}>
+                                    Basic Drawer
+                                </DrawerTitle>
+                                <DrawerDescription id={`${baseId}-desc-1`}>
+                                    This is a basic drawer example with header,
+                                    body, and footer sections.
+                                </DrawerDescription>
+                            </DrawerHeader>
+                            <DrawerBody>
+                                <p>Drawer content goes here.</p>
+                            </DrawerBody>
+                            <DrawerFooter>
+                                <DrawerClose asChild>
+                                    <Button
+                                        buttonType={ButtonType.SECONDARY}
+                                        text="Cancel"
+                                    />
+                                </DrawerClose>
+                                <Button
+                                    buttonType={ButtonType.PRIMARY}
+                                    text="Confirm"
+                                    onClick={() => setOpen1(false)}
+                                />
+                            </DrawerFooter>
+                        </DrawerContent>
+                    </DrawerPortal>
+                </Drawer>
+            </div>
+
+            {/* Drawer with Right Direction */}
+            <div style={{ padding: '20px' }}>
+                <Drawer open={open2} onOpenChange={setOpen2} direction="right">
+                    <DrawerTrigger>
+                        <Button
+                            buttonType={ButtonType.PRIMARY}
+                            text="Open Right Drawer"
+                        />
+                    </DrawerTrigger>
+                    <DrawerPortal>
+                        <DrawerOverlay />
+                        <DrawerContent direction="right" width={400}>
+                            <DrawerHeader>
+                                <DrawerTitle id={`${baseId}-title-2`}>
+                                    Right Drawer
+                                </DrawerTitle>
+                                <DrawerDescription id={`${baseId}-desc-2`}>
+                                    This drawer slides in from the right side.
+                                </DrawerDescription>
+                            </DrawerHeader>
+                            <DrawerBody>
+                                <p>Content for right drawer.</p>
+                            </DrawerBody>
+                            <DrawerFooter direction="right">
+                                <DrawerClose asChild>
+                                    <Button
+                                        buttonType={ButtonType.SECONDARY}
+                                        text="Close"
+                                    />
+                                </DrawerClose>
+                            </DrawerFooter>
+                        </DrawerContent>
+                    </DrawerPortal>
+                </Drawer>
+            </div>
+
+            {/* Drawer with Form Elements */}
+            <div style={{ padding: '20px' }}>
+                <Drawer open={open3} onOpenChange={setOpen3}>
+                    <DrawerTrigger>
+                        <Button
+                            buttonType={ButtonType.PRIMARY}
+                            text="Open Form Drawer"
+                        />
+                    </DrawerTrigger>
+                    <DrawerPortal>
+                        <DrawerOverlay />
+                        <DrawerContent>
+                            <DrawerHeader>
+                                <DrawerTitle id={`${baseId}-title-3`}>
+                                    Form Drawer
+                                </DrawerTitle>
+                                <DrawerDescription id={`${baseId}-desc-3`}>
+                                    This drawer contains form elements for
+                                    testing accessibility.
+                                </DrawerDescription>
+                            </DrawerHeader>
+                            <DrawerBody>
+                                <form>
+                                    <div className="mb-4">
+                                        <label
+                                            htmlFor={`${baseId}-name`}
+                                            className="block text-sm font-medium mb-1"
+                                        >
+                                            Name
+                                        </label>
+                                        <input
+                                            id={`${baseId}-name`}
+                                            type="text"
+                                            className="border border-gray-300 rounded px-3 py-2 w-full"
+                                            aria-required="true"
+                                        />
+                                    </div>
+                                    <div className="mb-4">
+                                        <label
+                                            htmlFor={`${baseId}-email`}
+                                            className="block text-sm font-medium mb-1"
+                                        >
+                                            Email
+                                        </label>
+                                        <input
+                                            id={`${baseId}-email`}
+                                            type="email"
+                                            className="border border-gray-300 rounded px-3 py-2 w-full"
+                                            aria-required="true"
+                                        />
+                                    </div>
+                                </form>
+                            </DrawerBody>
+                            <DrawerFooter>
+                                <DrawerClose asChild>
+                                    <Button
+                                        buttonType={ButtonType.SECONDARY}
+                                        text="Cancel"
+                                    />
+                                </DrawerClose>
+                                <Button
+                                    buttonType={ButtonType.PRIMARY}
+                                    text="Submit"
+                                    onClick={() => setOpen3(false)}
+                                />
+                            </DrawerFooter>
+                        </DrawerContent>
+                    </DrawerPortal>
+                </Drawer>
+            </div>
+
+            {/* Drawer with Multiple Interactive Elements */}
+            <div style={{ padding: '20px' }}>
+                <Drawer open={open4} onOpenChange={setOpen4}>
+                    <DrawerTrigger>
+                        <Button
+                            buttonType={ButtonType.PRIMARY}
+                            text="Open Interactive Drawer"
+                        />
+                    </DrawerTrigger>
+                    <DrawerPortal>
+                        <DrawerOverlay />
+                        <DrawerContent>
+                            <DrawerHeader>
+                                <DrawerTitle id={`${baseId}-title-4`}>
+                                    Interactive Drawer
+                                </DrawerTitle>
+                                <DrawerDescription id={`${baseId}-desc-4`}>
+                                    This drawer contains multiple interactive
+                                    elements for testing keyboard navigation.
+                                </DrawerDescription>
+                            </DrawerHeader>
+                            <DrawerBody>
+                                <div className="space-y-4">
+                                    <button
+                                        type="button"
+                                        className="px-4 py-2 bg-blue-500 text-white rounded"
+                                    >
+                                        Button 1
+                                    </button>
+                                    <button
+                                        type="button"
+                                        className="px-4 py-2 bg-green-500 text-white rounded"
+                                    >
+                                        Button 2
+                                    </button>
+                                    <input
+                                        type="text"
+                                        placeholder="Test input"
+                                        aria-label="Test input field"
+                                        className="border border-gray-300 rounded px-3 py-2 w-full"
+                                    />
+                                </div>
+                            </DrawerBody>
+                            <DrawerFooter>
+                                <DrawerClose asChild>
+                                    <Button
+                                        buttonType={ButtonType.SECONDARY}
+                                        text="Close"
+                                    />
+                                </DrawerClose>
+                            </DrawerFooter>
+                        </DrawerContent>
+                    </DrawerPortal>
+                </Drawer>
+            </div>
+        </div>
+    )
+}
+
+export default DrawerLightHouse