CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adilallo/component/AskOrganizer #14

Merged
an.di merged 5 commits from adilallo/component/AskOrganizer into adilallo/component/FeatureGrid 2025-08-28 20:29:45 +00:00
Conversation 0 Commits 5 Files Changed 7
+258 -20
an.di commented 2025-08-27 17:09:31 +00:00
Owner
Copy Link
Copy Source

Add AskOrganizer Component with Analytics and Variant Support

Overview

This PR introduces the AskOrganizer component that provides clear pathways for user inquiries throughout the Community Rule platform. The component serves as a critical conversion point with prominent call-to-action elements and comprehensive analytics tracking.

Components Added/Modified

New Components

  • AskOrganizer - Main contact section component with responsive design and variant support
  • ContentLockup "ask" variant - Simplified content lockup for contact sections

Enhanced Components

  • ContentLockup - Added "ask" variant with alignment support and responsive typography

Key Features

AskOrganizer Component

  • Responsive layout: 32px padding (mobile) → 96px/64px (md+)
  • Variant support: Centered, left-aligned, and compact layouts
  • Analytics integration: Comprehensive event tracking for contact interactions
  • Accessibility: Full keyboard navigation and screen reader support
  • Interactive states: Hover, focus, and active button states

ContentLockup Ask Variant

  • Typography: Bricolage 500 36px→44px→52px title, Inter 400 18px→24px subtitle
  • Alignment: Support for center and left alignment
  • Simplified structure: Title and subtitle only, no description or decorative elements
  • 8px gap: Consistent spacing between elements

Analytics Tracking

  • Event data: Component name, variant, button text, href, and timestamp
  • Google Analytics: Automatic gtag event tracking (if available)
  • Custom callbacks: Flexible analytics integration via onContactClick prop

Screenshots

Screenshot 2025-08-27 at 11.08.02 AM.png Screenshot 2025-08-27 at 11.08.25 AM.png Screenshot 2025-08-27 at 11.09.17 AM.png

Technical Implementation

Responsive Design

  • Mobile: 32px padding, 40px gap, large button
  • Tablet (md): 96px top/bottom, 64px left/right padding, 40px gap
  • Desktop (xl): 52px title, xlarge button with enhanced padding

Variant System

  • Centered: Default layout with center-aligned text and button
  • Left-aligned: Left-aligned text and button for different contexts
  • Compact: Reduced padding (16px→32px) and gap (20px) for tighter layouts

Accessibility Features

  • Semantic HTML: Proper section, heading, and button structure
  • ARIA labels: Enhanced button labels with context
  • Keyboard navigation: Full tab and enter/space key support
  • Focus management: Clear focus indicators with brand colors
  • Screen reader support: Proper heading hierarchy and descriptions

Testing

  • Component testing: Responsive behavior across all breakpoints
  • Analytics testing: Event tracking verification in Storybook
  • Accessibility testing: Keyboard navigation and screen reader compatibility
  • Visual testing: Variant differences and responsive typography

Storybook Stories

  • Default: Centered variant with analytics logging
  • LeftAligned: Left-aligned text and button layout
  • Compact: Reduced spacing variant
  • ContentLockup Ask: Showcases the ask variant styling

Future Enhancements

  • Contact form integration: Direct form embedding within component
  • Multiple contact methods: Email, chat, phone options
  • Personalized messaging: Context-aware content based on user type
  • A/B testing: Framework for testing different CTA messaging
  • Advanced analytics: Conversion tracking and user journey analysis
# Add AskOrganizer Component with Analytics and Variant Support ## Overview This PR introduces the AskOrganizer component that provides clear pathways for user inquiries throughout the Community Rule platform. The component serves as a critical conversion point with prominent call-to-action elements and comprehensive analytics tracking. ## Components Added/Modified ### New Components - **`AskOrganizer`** - Main contact section component with responsive design and variant support - **ContentLockup "ask" variant** - Simplified content lockup for contact sections ### Enhanced Components - **`ContentLockup`** - Added "ask" variant with alignment support and responsive typography ## Key Features ### AskOrganizer Component - **Responsive layout**: 32px padding (mobile) → 96px/64px (md+) - **Variant support**: Centered, left-aligned, and compact layouts - **Analytics integration**: Comprehensive event tracking for contact interactions - **Accessibility**: Full keyboard navigation and screen reader support - **Interactive states**: Hover, focus, and active button states ### ContentLockup Ask Variant - **Typography**: Bricolage 500 36px→44px→52px title, Inter 400 18px→24px subtitle - **Alignment**: Support for center and left alignment - **Simplified structure**: Title and subtitle only, no description or decorative elements - **8px gap**: Consistent spacing between elements ### Analytics Tracking - **Event data**: Component name, variant, button text, href, and timestamp - **Google Analytics**: Automatic gtag event tracking (if available) - **Custom callbacks**: Flexible analytics integration via onContactClick prop ## Screenshots <img width="318" alt="Screenshot 2025-08-27 at 11.08.02 AM.png" src="attachments/4d5b453d-9971-4f6f-b178-96b227433d11"> <img width="633" alt="Screenshot 2025-08-27 at 11.08.25 AM.png" src="attachments/00cea634-3511-48d1-87f0-7e90e9e728ab"> <img width="1045" alt="Screenshot 2025-08-27 at 11.09.17 AM.png" src="attachments/4ad431ce-c57e-43e7-ac76-2001ed08a0a2"> ## Technical Implementation ### Responsive Design - **Mobile**: 32px padding, 40px gap, large button - **Tablet (md)**: 96px top/bottom, 64px left/right padding, 40px gap - **Desktop (xl)**: 52px title, xlarge button with enhanced padding ### Variant System - **Centered**: Default layout with center-aligned text and button - **Left-aligned**: Left-aligned text and button for different contexts - **Compact**: Reduced padding (16px→32px) and gap (20px) for tighter layouts ### Accessibility Features - **Semantic HTML**: Proper section, heading, and button structure - **ARIA labels**: Enhanced button labels with context - **Keyboard navigation**: Full tab and enter/space key support - **Focus management**: Clear focus indicators with brand colors - **Screen reader support**: Proper heading hierarchy and descriptions ## Testing - **Component testing**: Responsive behavior across all breakpoints - **Analytics testing**: Event tracking verification in Storybook - **Accessibility testing**: Keyboard navigation and screen reader compatibility - **Visual testing**: Variant differences and responsive typography ## Storybook Stories - **Default**: Centered variant with analytics logging - **LeftAligned**: Left-aligned text and button layout - **Compact**: Reduced spacing variant - **ContentLockup Ask**: Showcases the ask variant styling ## Future Enhancements - **Contact form integration**: Direct form embedding within component - **Multiple contact methods**: Email, chat, phone options - **Personalized messaging**: Context-aware content based on user type - **A/B testing**: Framework for testing different CTA messaging - **Advanced analytics**: Conversion tracking and user journey analysis
Screenshot 2025-08-27 at 11.08.02 AM.png
48 KiB
Screenshot 2025-08-27 at 11.08.25 AM.png
61 KiB
Screenshot 2025-08-27 at 11.09.17 AM.png
64 KiB
an.di added 4 commits 2025-08-27 17:09:31 +00:00
Ask Organizer default breakpoint 0f996889d2
Ask Organizer md breakpoint 50d4bf6a0f
Ask Organizer xl breakpoint d0ce6f16f2
Ask Organizer storybook 6a66f5f61f
an.di added 1 commit 2025-08-28 20:29:26 +00:00
Storybook Image fixes 4d8e735398
an.di merged commit 1ed0e2f65c into adilallo/component/FeatureGrid 2025-08-28 20:29:45 +00:00
an.di deleted branch adilallo/component/AskOrganizer 2025-08-28 20:30:09 +00:00
an.di self-assigned this 2025-08-28 20:31:05 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
an.di (Andy DiLallo) ntnsndr (Nathan Schneider)
No Assignees an.di
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CommunityRule/community-rule#14
Delete Branch "adilallo/component/AskOrganizer"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?