feat: timeline component

[maxnoelp2]

This pull request introduces a new MilestoneCard component for the timeline feature, updates the timeline's template and styling to support this new card, and improves code formatting and maintainability in several places. The most significant changes are the addition of the MilestoneCard plugin (replacing the previous card type in timelines), the corresponding template, and SCSS updates for better visual consistency.

Timeline component and plugin updates:

• Added a new MilestoneCard component (MilestoneCardPlugin) to cms_theme/cms_components.py, with support for label, heading, text, images (top/bottom), and links. This replaces the previous CardPlugin in timeline containers. [1] [2]
• Updated the timeline template (timeline.html) to render MilestoneCardPlugin instances instead of the old card type.
• Added a dedicated template for milestone cards (milestone_card.html), supporting inline editing and slot rendering for images and links.

Styling and accessibility improvements:

• Improved SCSS for .milestone-card to ensure white text on dark backgrounds and removed extra margin from milestone text paragraphs for better visual consistency. [1] [2]

General code maintenance and formatting:

• Reordered imports in cms_theme/cms_components.py for clarity and consistency. [1] [2]
• Reformatted several long lines and fieldsets for readability and PEP8 compliance in cms_theme/cms_components.py. [1] [2] [3] [4] [5] [6]

Summary by Sourcery

Introduce a dedicated Milestone card component for timelines and update templates and styles to support it.

New Features:

• Add a MilestoneCard CMS component with editable label, heading, text, and media/link slots for use within timeline containers.
• Provide a dedicated milestone card template and wire it into the existing timeline template in place of the generic card plugin.

Enhancements:

• Adjust timeline SCSS to ensure readable text on dark milestone card backgrounds and tighten spacing for milestone body text.
• Clean up imports, formatting, and configuration for existing CMS components to improve readability and consistency.

[sourcery-ai]

Reviewer's Guide

Introduces a dedicated MilestoneCard CMS component for timeline milestones, updates the timeline container template to use it instead of generic cards, adds a matching milestone card template, adjusts SCSS for contrast and spacing, and performs light formatting/PEP8 cleanups in cms_components.py.

Sequence diagram for rendering timeline with MilestoneCard plugins

sequenceDiagram
    actor Editor
    participant CMSAdmin
    participant TimelineContainerPlugin as TimelineContainer
    participant MilestoneCardPlugin as MilestoneCard
    participant TemplateEngine
    participant Browser

    Editor->>CMSAdmin: Open page with TimelineContainer
    Editor->>CMSAdmin: Add MilestoneCard child
    CMSAdmin->>MilestoneCard: Create instance(label, heading, text)
    CMSAdmin->>MilestoneCard: Add child plugins to slots(links, image_top, image_bottom)

    Editor->>CMSAdmin: Publish page

    Browser->>CMSAdmin: GET timeline page
    CMSAdmin->>TemplateEngine: Render template timeline_timeline_html
    TemplateEngine->>TimelineContainer: Iterate child_plugin_instances
    TimelineContainer->>TemplateEngine: For non_MilestoneCardPlugin children render as header
    TimelineContainer->>TemplateEngine: For MilestoneCardPlugin children render as timeline items
    TemplateEngine->>MilestoneCard: Render template timeline_milestone_card_html
    MilestoneCard->>TemplateEngine: Output label, heading, text, slot content
    TemplateEngine-->>Browser: HTML with milestone_card structure

Loading

Class diagram for new MilestoneCard CMS component and timeline integration

classDiagram
    class CMSFrontendComponent {
    }

    class TimelineContainer {
        +Meta.render_template = timeline_timeline_html
        +Meta.allow_children = True
        +Meta.child_classes = [MilestoneCardPlugin, TextPlugin, HeadingPlugin, SpacingPlugin, ButtonGroupPlugin, TimelineSpacerPlugin]
    }

    class MilestoneCard {
        +CharField label
        +CharField heading
        +HTMLFormField text
        +Meta.name = Milestone_Card
        +Meta.render_template = timeline_milestone_card_html
        +Meta.allow_children = True
        +Meta.parent_classes = [TimelineContainerPlugin]
        +Meta.mixins = [Background, Spacing]
        +Meta.slots = links, image_top, image_bottom
        +Meta.frontend_editable_fields = [label, heading, text]
    }

    class Slot {
        +name
        +label
        +child_classes
    }

    class TextLinkPlugin {
    }

    class ImagePlugin {
    }

    CMSFrontendComponent <|-- TimelineContainer
    CMSFrontendComponent <|-- MilestoneCard

    TimelineContainer o-- MilestoneCard : child_classes
    MilestoneCard o-- Slot : slots
    Slot --> TextLinkPlugin : links
    Slot --> ImagePlugin : image_top
    Slot --> ImagePlugin : image_bottom

Loading

File-Level Changes

Change	Details	Files
Add dedicated MilestoneCard CMS component for use inside timeline containers.	Register new MilestoneCard CMSFrontendComponent with name, template, mixins, and allowed parent/child configuration. Define label, heading, and HTML text fields, marking them as frontend editable. Configure slots for links and top/bottom images scoped to specific child plugin types.	cms_theme/cms_components.py
Switch timeline container to use MilestoneCard plugins and render them via a dedicated template.	Update TimelineContainerPlugin Meta.child_classes to accept MilestoneCardPlugin instead of CardPlugin. Adjust timeline.html to treat MilestoneCardPlugin as the special milestone item type both in the header filtering logic and in the main timeline loop. Introduce milestone_card.html template that renders label, heading, text, image slots, and link slot with inline editing support.	cms_theme/cms_components.py cms_theme/templates/timeline/timeline.html cms_theme/templates/timeline/milestone_card.html
Refine styling and spacing for milestone cards on dark backgrounds.	Add SCSS rules to force white text color for milestone cards when using dark background utility classes, mirroring feature-section behavior. Add .milestone-text helper to remove bottom margins from contained paragraphs for tighter vertical spacing.	backend/static/scss/_timeline.scss
Apply minor formatting and consistency cleanups in cms_components.py.	Import ColorChoiceField from local fields module and adjust import ordering. Reformat long expressions, function calls, and fieldset declarations for PEP8-compliant line lengths and readability. Normalize string quoting and whitespace in several component methods (e.g., GitHub stats, Counter, TimelineCTA).	cms_theme/cms_components.py

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#136	Refactor the Timeline layout so that heading, eyebrow, and description are moved outside the Timeline component into a full-width <section> (with support for centered content, e.g. via .text-center).	❌	The PR only changes which child plugins are treated as milestones (from CardPlugin to MilestoneCardPlugin) inside timeline.html. The heading/intro loop remains inside the same timeline template and container; there is no new full-width section wrapper or explicit use of a <section> element or .text-center for those header elements.
#136	Restrict Timeline children to dedicated Milestone components that replace the old Card/CardInner usage, with Timeline handling spacing and Milestones populated by plugins (default left-aligned content).	✅

Possibly linked issues

• #unknown: The PR implements the proposed Timeline refactor by introducing Milestone-only cards and treating other children as outer content.
• #DJAN-6: This PR implements the specialized timeline item (milestone) plugin and styling required by the Timeline Plugin issue.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've left some high level feedback:

• The newly added ColorChoiceField import in cms_components.py doesn't appear to be used in the diff; consider removing it to avoid an unused import.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The newly added `ColorChoiceField` import in `cms_components.py` doesn't appear to be used in the diff; consider removing it to avoid an unused import.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[fsbraun]

Why is this an <article> tag?