@shohojdhara/atomix 0.3.14 → 0.4.0

package/src/components/Footer/Footer.tsx

@@ -149,143 +149,145 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(
 
     const footerContent = (
       <div className={containerClass}>
-          {/* Main Footer Content */}
-          <Grid
-            className={sectionsClass}
-            alignItems="start"
-            justifyContent={layout === 'centered' ? 'center' : undefined}
-          >
-            {/* Brand Section */}
-            {(brand || brandLogo || brandDescription) && (
-              <GridCol {...(getResponsiveColumnProps('brand') as any)} className={brandClass}>
-                {brandLogo && (
-                  <div className="c-footer__brand-logo">
-                    {typeof brandLogo === 'string' ? (
-                      <img src={brandLogo} alt={'Brand Logo'} />
-                    ) : (
-                      brandLogo
-                    )}
-                  </div>
-                )}
-                {brand && (
-                  <div className="c-footer__brand-name">
-                    {typeof brand === 'string' ? <h3>{brand}</h3> : brand}
-                  </div>
-                )}
-                {brandDescription && (
-                  <div className="c-footer__brand-description">{brandDescription}</div>
-                )}
-                {socialLinks.length > 0 && (
-                  <div className="c-footer__social" data-testid="footer-social-links">
-                    {socialLinks.map((link, index) => (
-                      <FooterSocialLink
-                        key={`${link.platform}-${index}`}
-                        platform={link.platform}
-                        url={link.url}
-                        icon={link.icon}
-                        label={link.label}
-                        size={size}
-                      />
-                    ))}
-                  </div>
-                )}
-              </GridCol>
-            )}
-
-            {/* Footer Sections */}
-            {children && (
-              <GridCol
-                {...(getResponsiveColumnProps('content') as any)}
-                className="c-footer__content"
-              >
-                <Grid
-                  className="c-footer__sections"
-                  alignItems={layout === 'centered' || layout === 'stacked' ? 'center' : undefined}
-                >
-                  {React.Children.map(children, child => {
-                    // Check if the child is a valid React element
-                    if (React.isValidElement(child)) {
-                      // Clone the element and pass the showNewsletter prop
-                      return React.cloneElement(child, { showNewsletter } as any);
-                    }
-                    return child;
-                  })}
-                </Grid>
-              </GridCol>
-            )}
+        {/* Main Footer Content */}
+        <Grid
+          className={sectionsClass}
+          alignItems="start"
+          justifyContent={layout === 'centered' ? 'center' : undefined}
+        >
+          {/* Brand Section */}
+          {(brand || brandLogo || brandDescription) && (
+            <GridCol {...(getResponsiveColumnProps('brand') as any)} className={brandClass}>
+              {brandLogo && (
+                <div className="c-footer__brand-logo">
+                  {typeof brandLogo === 'string' ? (
+                    <img src={brandLogo} alt={'Brand Logo'} />
+                  ) : (
+                    brandLogo
+                  )}
+                </div>
+              )}
+              {brand && (
+                <div className="c-footer__brand-name">
+                  {typeof brand === 'string' ? <h3>{brand}</h3> : brand}
+                </div>
+              )}
+              {brandDescription && (
+                <div className="c-footer__brand-description">{brandDescription}</div>
+              )}
+              {socialLinks.length > 0 && (
+                <div className="c-footer__social" data-testid="footer-social-links">
+                  {socialLinks.map((link, index) => (
+                    <FooterSocialLink
+                      key={`${link.platform}-${index}`}
+                      platform={link.platform}
+                      url={link.url}
+                      icon={link.icon}
+                      label={link.label}
+                      size={size}
+                    />
+                  ))}
+                </div>
+              )}
+            </GridCol>
+          )}
 
-            {/* Newsletter Section */}
-            {showNewsletter && (
-              <GridCol
-                {...(getResponsiveColumnProps('newsletter') as any)}
-                className="c-footer__newsletter"
+          {/* Footer Sections */}
+          {children && (
+            <GridCol
+              {...(getResponsiveColumnProps('content') as any)}
+              className="c-footer__content"
+            >
+              <Grid
+                className="c-footer__sections"
+                alignItems={layout === 'centered' || layout === 'stacked' ? 'center' : undefined}
               >
-                <h4 className="c-footer__newsletter-title">{newsletterTitle}</h4>
-                {newsletterDescription && (
-                  <p className="c-footer__newsletter-description">{newsletterDescription}</p>
-                )}
-                <Form
-                  className="c-footer__newsletter-form"
-                  onSubmit={e => {
-                    e.preventDefault();
-                    const formData = new FormData(e.currentTarget);
-                    const email = formData.get('email') as string;
-                    if (email) handleNewsletterSubmit(email);
-                  }}
-                >
-                  <div className="c-footer__newsletter-input-group">
-                    <Input
-                      type="email"
-                      name="email"
-                      className="c-footer__newsletter-input"
-                      placeholder={newsletterPlaceholder}
-                      required
-                    />
-                    <Button type="submit" className="c-footer__newsletter-button">
-                      {newsletterButtonText}
-                    </Button>
-                  </div>
-                </Form>
-              </GridCol>
-            )}
-          </Grid>
+                {React.Children.map(children, child => {
+                  // Check if the child is a valid React element
+                  if (React.isValidElement(child)) {
+                    // Clone the element and pass the showNewsletter prop
+                    return React.cloneElement(child, { showNewsletter } as any);
+                  }
+                  return child;
+                })}
+              </Grid>
+            </GridCol>
+          )}
 
-          {(copyright || showBackToTop) && (
-            <div className={bottomClass}>
-              {copyright && <div className="c-footer__copyright">{copyright}</div>}
-              {showBackToTop && (
-                <Button
-                  variant="ghost"
-                  className="c-footer__back-to-top"
-                  onClick={handleBackToTop}
-                  disabled={disabled}
-                  aria-label={backToTopText}
-                >
-                  <span className="c-footer__back-to-top-icon">↑</span>
-                  <span className="c-footer__back-to-top-text">{backToTopText}</span>
-                </Button>
+          {/* Newsletter Section */}
+          {showNewsletter && (
+            <GridCol
+              {...(getResponsiveColumnProps('newsletter') as any)}
+              className="c-footer__newsletter"
+            >
+              <h4 className="c-footer__newsletter-title">{newsletterTitle}</h4>
+              {newsletterDescription && (
+                <p className="c-footer__newsletter-description">{newsletterDescription}</p>
               )}
-            </div>
+              <Form
+                className="c-footer__newsletter-form"
+                onSubmit={e => {
+                  e.preventDefault();
+                  const formData = new FormData(e.currentTarget);
+                  const email = formData.get('email') as string;
+                  if (email) handleNewsletterSubmit(email);
+                }}
+              >
+                <div className="c-footer__newsletter-input-group">
+                  <Input
+                    type="email"
+                    name="email"
+                    className="c-footer__newsletter-input"
+                    placeholder={newsletterPlaceholder}
+                    required
+                  />
+                  <Button type="submit" className="c-footer__newsletter-button">
+                    {newsletterButtonText}
+                  </Button>
+                </div>
+              </Form>
+            </GridCol>
           )}
-        </div>
+        </Grid>
+
+        {(copyright || showBackToTop) && (
+          <div className={bottomClass}>
+            {copyright && <div className="c-footer__copyright">{copyright}</div>}
+            {showBackToTop && (
+              <Button
+                variant="ghost"
+                className="c-footer__back-to-top"
+                onClick={handleBackToTop}
+                disabled={disabled}
+                aria-label={backToTopText}
+              >
+                <span className="c-footer__back-to-top-icon">↑</span>
+                <span className="c-footer__back-to-top-text">{backToTopText}</span>
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
     );
 
     return (
-      <footer ref={ref} className={footerClass + ` c-footer ${glass ? 'c-footer--glass' : ''}`} {...props}>
-    {glass ? (
-      <AtomixGlass {...(glass as unknown as AtomixGlassProps)} elasticity={0}>
-        <div className="c-footer__glass">
-          {footerContent}
-        </div>
-      </AtomixGlass>
-    ) : (
-      footerContent
-    )}
-  </footer>
-);
-}
+      <footer
+        ref={ref}
+        className={footerClass + ` c-footer ${glass ? 'c-footer--glass' : ''}`}
+        {...props}
+      >
+        {glass ? (
+          <AtomixGlass {...(glass as unknown as AtomixGlassProps)} elasticity={0}>
+            <div className="c-footer__glass">{footerContent}</div>
+          </AtomixGlass>
+        ) : (
+          footerContent
+        )}
+      </footer>
+    );
+  }
 );
 
 Footer.displayName = 'Footer';
 
-export default Footer;
+export default Footer;

package/src/components/Footer/FooterLink.tsx

@@ -55,7 +55,7 @@ export const FooterLink = forwardRef<HTMLAnchorElement, FooterLinkProps>(
         ...(href && !disabled ? { to: href } : {}),
         ...linkProps,
       };
-      
+
       return (
         <Component {...componentProps}>
           {icon && <span className="c-footer__link-icon">{icon}</span>}
@@ -77,4 +77,4 @@ export const FooterLink = forwardRef<HTMLAnchorElement, FooterLinkProps>(
 
 FooterLink.displayName = 'FooterLink';
 
-export default FooterLink;
+export default FooterLink;

package/src/components/Form/Checkbox.stories.tsx

@@ -1,6 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { useState } from 'react';
 import { Checkbox } from './Checkbox';
 
+// Mock event handlers
+const mockOnChange = fn();
+
 const meta = {
   title: 'Components/Form/Checkbox',
   component: Checkbox,
@@ -8,8 +13,66 @@ const meta = {
     layout: 'centered',
     docs: {
       description: {
-        component:
-          'The Checkbox component allows users to select one or more options from a set. It supports checked, unchecked, and indeterminate states, and can be used in forms or as standalone controls. Checkboxes provide clear visual feedback and support keyboard navigation.',
+        component: `
+# Checkbox
+
+## Overview
+
+Checkbox component allows users to select one or more options from a set. It supports checked, unchecked, and indeterminate states, and can be used in forms or as standalone controls. Checkboxes provide clear visual feedback and support keyboard navigation.
+
+## Features
+
+- Checked, unchecked, and indeterminate states
+- Label support
+- Disabled state
+- Validation states (valid/invalid)
+- Glass morphism effect
+- Accessible design
+- Responsive behavior
+
+## Accessibility
+
+- Keyboard support: Navigate and toggle with keyboard
+- Screen reader: State and label announced properly
+- ARIA support: Proper roles and properties for checkbox components
+- Focus management: Visible focus indicators maintained
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<Checkbox 
+  label="Option label" 
+  checked={isChecked}
+  onChange={setChecked}
+/>
+\`\`\`
+
+### Indeterminate State
+
+\`\`\`tsx
+<Checkbox 
+  label="Option label" 
+  indeterminate={true}
+/>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| label | ReactNode | - | Checkbox label text or element |
+| checked | boolean | false | Whether the checkbox is checked |
+| disabled | boolean | false | Whether the checkbox is disabled |
+| invalid | boolean | false | Whether the checkbox is invalid |
+| valid | boolean | false | Whether the checkbox is valid |
+| indeterminate | boolean | false | Whether the checkbox is in indeterminate state |
+| glass | boolean \| AtomixGlassProps | false | Enable glass morphism effect |
+| onChange | (event: ChangeEvent<HTMLInputElement>) => void | - | Callback when checkbox state changes |
+        `,
       },
     },
   },
@@ -17,31 +80,63 @@ const meta = {
   argTypes: {
     label: {
       control: 'text',
-      description: 'Checkbox label text',
+      description: 'Checkbox label text or element',
+      table: {
+        type: { summary: 'ReactNode' },
+        defaultValue: { summary: '-' },
+      },
     },
     checked: {
       control: 'boolean',
       description: 'Whether the checkbox is checked',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
     },
     disabled: {
       control: 'boolean',
       description: 'Whether the checkbox is disabled',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
     },
     invalid: {
       control: 'boolean',
       description: 'Whether the checkbox is invalid',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
     },
     valid: {
       control: 'boolean',
       description: 'Whether the checkbox is valid',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
     },
     indeterminate: {
       control: 'boolean',
       description: 'Whether the checkbox is in indeterminate state',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
     },
     glass: {
-      control: 'boolean',
+      control: { type: 'boolean' },
       description: 'Enable glass morphism effect',
+      table: {
+        type: { summary: 'boolean | AtomixGlassProps' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    onChange: {
+      action: 'changed',
+      description: 'Callback when checkbox state changes',
     },
   },
 } satisfies Meta<typeof Checkbox>;
@@ -50,9 +145,17 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // Basic checkbox
-export const Basic: Story = {
+export const BasicUsage: Story = {
   args: {
     label: 'Accept terms and conditions',
+    onChange: mockOnChange,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic checkbox with label.',
+      },
+    },
   },
 };
 
@@ -61,11 +164,19 @@ export const Checked: Story = {
   args: {
     label: 'Accept terms and conditions',
     checked: true,
+    onChange: mockOnChange,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Checked checkbox state.',
+      },
+    },
   },
 };
 
 // Checkbox states
-export const States: Story = {
+export const AllStates: Story = {
   render: (args: any) => (
     <div className="u-flex u-flex-column u-gap-3">
       <Checkbox label="Default checkbox" />
@@ -77,12 +188,27 @@ export const States: Story = {
       <Checkbox label="Indeterminate checkbox" indeterminate />
     </div>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Checkbox in all available states.',
+      },
+    },
+  },
 };
 
 // Without label
 export const WithoutLabel: Story = {
   args: {
     'aria-label': 'Checkbox without visible label',
+    onChange: mockOnChange,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Checkbox without visible label, using aria-label.',
+      },
+    },
   },
 };
 
@@ -91,6 +217,7 @@ export const Glass: Story = {
   args: {
     label: 'Glass Checkbox',
     glass: true,
+    onChange: mockOnChange,
   },
   render: (args: any) => (
     <div
@@ -107,6 +234,13 @@ export const Glass: Story = {
       <Checkbox {...args} />
     </div>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Checkbox with glass morphism effect.',
+      },
+    },
+  },
 };
 
 // Glass with custom settings

package/src/components/Form/Checkbox.test.tsx

@@ -0,0 +1,63 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { Checkbox } from './Checkbox';
+import React from 'react';
+
+expect.extend(toHaveNoViolations);
+
+// Mock AtomixGlass
+vi.mock('../AtomixGlass/AtomixGlass', () => ({
+  AtomixGlass: ({ children }: any) => <div>{children}</div>,
+}));
+
+describe('Checkbox Component', () => {
+  it('renders correctly with label', () => {
+    render(<Checkbox label="Accept Terms" />);
+    // In current implementation, if no ID is provided, htmlFor is undefined, so label is not associated.
+    // screen.getByLabelText might fail or might not find the input.
+    // Let's see.
+    expect(screen.getByText('Accept Terms')).toBeInTheDocument();
+  });
+
+  it('associates label with input when ID is provided', () => {
+    render(<Checkbox label="Subscribe" id="subscribe-check" />);
+    expect(screen.getByLabelText('Subscribe')).toBeInTheDocument();
+  });
+
+  it('associates label with input WITHOUT ID', () => {
+    // This tests my proposed improvement: wrapping input in label or auto-ID
+    render(<Checkbox label="No ID Checkbox" />);
+    // If not associated, this throws
+    expect(screen.getByLabelText('No ID Checkbox')).toBeInTheDocument();
+  });
+
+  it('handles checked state', () => {
+    const handleChange = vi.fn();
+    render(<Checkbox checked onChange={handleChange} label="Checked" id="checked-id" />);
+    const input = screen.getByLabelText('Checked');
+    expect(input).toBeChecked();
+
+    fireEvent.click(input);
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('forwards ref', () => {
+    const ref = React.createRef<HTMLInputElement>();
+    render(<Checkbox ref={ref} label="Ref Checkbox" />);
+    expect(ref.current).toBeInstanceOf(HTMLInputElement);
+  });
+
+  it('handles indeterminate state', () => {
+    // This might need manual DOM check as indeterminate is a property, not attribute
+    const { getByRole } = render(<Checkbox indeterminate label="Indeterminate" id="indet" />);
+    const input = getByRole('checkbox') as HTMLInputElement;
+    expect(input.indeterminate).toBe(true);
+  });
+
+  it('should have no accessibility violations', async () => {
+    const { container } = render(<Checkbox label="Accessible Checkbox" id="a11y-check" />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});