@shohojdhara/atomix 0.3.15 → 0.4.1

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.test.tsx

@@ -8,56 +8,56 @@ expect.extend(toHaveNoViolations);
 
 // Mock AtomixGlass
 vi.mock('../AtomixGlass/AtomixGlass', () => ({
-    AtomixGlass: ({ children }: any) => <div>{children}</div>,
+  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();
-    });
+  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();
+  });
 });

package/src/components/Form/Checkbox.tsx

@@ -10,116 +10,124 @@ const CHECKBOX_CLASSES = {
   MIXED: 'c-checkbox--mixed',
 };
 
-export const Checkbox = React.memo(forwardRef<HTMLInputElement, CheckboxProps>(({
-  label,
-  checked,
-  onChange,
-  className = '',
-  style,
-  disabled = false,
-  required = false,
-  id,
-  name,
-  value,
-  invalid = false,
-  valid = false,
-  indeterminate = false,
-  'aria-label': ariaLabel,
-  'aria-describedby': ariaDescribedBy,
-  onClick,
-  glass,
-  ...props
-}, ref) => {
-  // Local ref to handle indeterminate state
-  const localRef = useRef<HTMLInputElement>(null);
+export const Checkbox = React.memo(
+  forwardRef<HTMLInputElement, CheckboxProps>(
+    (
+      {
+        label,
+        checked,
+        onChange,
+        className = '',
+        style,
+        disabled = false,
+        required = false,
+        id,
+        name,
+        value,
+        invalid = false,
+        valid = false,
+        indeterminate = false,
+        'aria-label': ariaLabel,
+        'aria-describedby': ariaDescribedBy,
+        onClick,
+        glass,
+        ...props
+      },
+      ref
+    ) => {
+      // Local ref to handle indeterminate state
+      const localRef = useRef<HTMLInputElement>(null);
 
-  // Merge refs
-  useImperativeHandle(ref, () => localRef.current as HTMLInputElement);
+      // Merge refs
+      useImperativeHandle(ref, () => localRef.current as HTMLInputElement);
 
-  // Handle indeterminate
-  useEffect(() => {
-    if (localRef.current) {
-      localRef.current.indeterminate = Boolean(indeterminate);
-    }
-  }, [indeterminate]);
+      // Handle indeterminate
+      useEffect(() => {
+        if (localRef.current) {
+          localRef.current.indeterminate = Boolean(indeterminate);
+        }
+      }, [indeterminate]);
 
-  // Generate classes
-  let validationClass = '';
-  if (invalid) {
-    validationClass = CHECKBOX_CLASSES.INVALID;
-  } else if (valid) {
-    validationClass = CHECKBOX_CLASSES.VALID;
-  }
+      // Generate classes
+      let validationClass = '';
+      if (invalid) {
+        validationClass = CHECKBOX_CLASSES.INVALID;
+      } else if (valid) {
+        validationClass = CHECKBOX_CLASSES.VALID;
+      }
 
-  const disabledClass = disabled ? CHECKBOX_CLASSES.DISABLED : '';
-  const indeterminateClass = indeterminate ? CHECKBOX_CLASSES.MIXED : '';
-  const glassClass = glass ? 'c-checkbox--glass' : '';
+      const disabledClass = disabled ? CHECKBOX_CLASSES.DISABLED : '';
+      const indeterminateClass = indeterminate ? CHECKBOX_CLASSES.MIXED : '';
+      const glassClass = glass ? 'c-checkbox--glass' : '';
 
-  const checkboxClass = `${CHECKBOX_CLASSES.BASE} ${validationClass} ${disabledClass} ${indeterminateClass} ${glassClass} ${className}`.trim();
+      const checkboxClass =
+        `${CHECKBOX_CLASSES.BASE} ${validationClass} ${disabledClass} ${indeterminateClass} ${glassClass} ${className}`.trim();
 
-  const inputElement = (
-    <input
-      ref={localRef}
-      type="checkbox"
-      className="c-checkbox__input"
-      checked={checked}
-      onChange={onChange}
-      onClick={onClick}
-      disabled={disabled}
-      required={required}
-      id={id}
-      name={name}
-      value={value}
-      aria-label={!label ? ariaLabel : undefined}
-      aria-describedby={ariaDescribedBy}
-      aria-invalid={invalid}
-      {...props}
-    />
-  );
+      const inputElement = (
+        <input
+          ref={localRef}
+          type="checkbox"
+          className="c-checkbox__input"
+          checked={checked}
+          onChange={onChange}
+          onClick={onClick}
+          disabled={disabled}
+          required={required}
+          id={id}
+          name={name}
+          value={value}
+          aria-label={!label ? ariaLabel : undefined}
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={invalid}
+          {...props}
+        />
+      );
 
-  let content: React.ReactNode;
+      let content: React.ReactNode;
 
-  if (id && label) {
-    content = (
-      <div className={checkboxClass} style={style}>
-        {inputElement}
-        <label className="c-checkbox__label" htmlFor={id}>
-          {label}
-        </label>
-      </div>
-    );
-  } else if (label) {
-    // Wrap input in label for accessibility when no ID is provided
-    content = (
-      <label className={checkboxClass} style={style}>
-         {inputElement}
-         <span className="c-checkbox__label">{label}</span>
-      </label>
-    );
-  } else {
-    // No label
-    content = (
-      <div className={checkboxClass} style={style}>
-        {inputElement}
-      </div>
-    );
-  }
+      if (id && label) {
+        content = (
+          <div className={checkboxClass} style={style}>
+            {inputElement}
+            <label className="c-checkbox__label" htmlFor={id}>
+              {label}
+            </label>
+          </div>
+        );
+      } else if (label) {
+        // Wrap input in label for accessibility when no ID is provided
+        content = (
+          <label className={checkboxClass} style={style}>
+            {inputElement}
+            <span className="c-checkbox__label">{label}</span>
+          </label>
+        );
+      } else {
+        // No label
+        content = (
+          <div className={checkboxClass} style={style}>
+            {inputElement}
+          </div>
+        );
+      }
 
-  if (glass) {
-    const defaultGlassProps = {
-      displacementScale: 40,
-      blurAmount: 1,
-      saturation: 160,
-      aberrationIntensity: 0.3,
-      cornerRadius: 6,
-      mode: 'shader' as const,
-    };
-    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
-    return <AtomixGlass {...glassProps}>{content}</AtomixGlass>;
-  }
+      if (glass) {
+        const defaultGlassProps = {
+          displacementScale: 40,
+          blurAmount: 1,
+          saturation: 160,
+          aberrationIntensity: 0.3,
+          cornerRadius: 6,
+          mode: 'shader' as const,
+        };
+        const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+        return <AtomixGlass {...glassProps}>{content}</AtomixGlass>;
+      }
 
-  return content;
-}));
+      return content;
+    }
+  )
+);
 
 Checkbox.displayName = 'Checkbox';
 

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

@@ -211,19 +211,11 @@ export const CompleteForm: Story = {
         </FormGroup>
 
         <FormGroup label="Bio" htmlFor="bio">
-          <Textarea
-            id="bio"
-            name="bio"
-            placeholder="Tell us about yourself"
-            rows={4}
-          />
+          <Textarea id="bio" name="bio" placeholder="Tell us about yourself" rows={4} />
         </FormGroup>
 
         <FormGroup label="Subscribe to newsletter">
-          <Checkbox
-            name="newsletter"
-            label="Yes, I would like to receive updates"
-          />
+          <Checkbox name="newsletter" label="Yes, I would like to receive updates" />
         </FormGroup>
 
         <div className="u-flex u-gap-3 u-mt-4">