Skip to content

Add newsletter block#40

Merged
shsteimer merged 3 commits into
mainfrom
feature/newsletter-block
Oct 14, 2025
Merged

Add newsletter block#40
shsteimer merged 3 commits into
mainfrom
feature/newsletter-block

Conversation

@shsteimer

Copy link
Copy Markdown
Collaborator

Summary

  • Implements newsletter subscription block for the recipe sidebar
  • Form includes email input and Sign Up button
  • Includes description text and privacy policy information

Implementation Details

  • Email input field with proper placeholder text and focus states
  • Sign Up button with hover and active states
  • Light gray background (#f5f5f5) to differentiate from page background
  • Links styled consistently with site design
  • Mobile responsive: form elements stack vertically on small screens (≤600px)
  • Form submission prevented for now (no backend integration)

Test Plan

  • Block renders correctly in recipe sidebar
  • Form elements display properly
  • Focus states work on email input
  • Hover/active states work on button
  • Mobile responsive layout works
  • Linting passes

Test URL

https://feature-newsletter-block--food-network--cloudadoption.aem.page/recipes/goulash-8670582

Check the sidebar to see the newsletter subscription form block.

Closes #17

🤖 Generated with Claude Code

Implements a newsletter subscription form block for the recipe sidebar. The form includes an email input field and a Sign Up button with proper styling and responsive design.

Features:
- Email input field with focus states
- Sign Up button with hover/active states
- Description text with privacy policy links
- Footer with privacy policy information
- Light gray background (#f5f5f5)
- Mobile responsive design (stacks form elements on small screens)
- Form submission prevented (no-op for now)

Closes #17

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@aem-code-sync

aem-code-sync Bot commented Oct 14, 2025

Copy link
Copy Markdown

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

  • Re-run PSI checks
  • Re-sync branch
Commits

@aem-code-sync

aem-code-sync Bot commented Oct 14, 2025

Copy link
Copy Markdown
Page Scores Audits Google
📱 /recipes/goulash-8670582 PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
🖥️ /recipes/goulash-8670582 PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

- Remove mobile responsive styles (sidebar is desktop-only)
- Make input and button seamlessly connected with no gap
- Input has rounded corners on left, button on right
- Reduced padding and adjusted border radius for tighter fit
- Removed border-right from input so it connects flush with button
- Adjusted button font size to 12px for better proportion

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@aem-code-sync
aem-code-sync Bot temporarily deployed to feature/newsletter-block October 14, 2025 22:24 Inactive
- Remove wrapper div and append elements directly to block
- Rename newsletter-form-wrapper to newsletter-form-element
- Move flex layout styles to the .newsletter block itself
- Simplifies DOM structure and avoids conflicts with section container/wrapper classes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@shsteimer
shsteimer merged commit 0240056 into main Oct 14, 2025
2 checks passed
@shsteimer
shsteimer deleted the feature/newsletter-block branch October 14, 2025 22:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Newsletter Block

1 participant