Fixed fonts and spacing for the intro Banner.

[AlexSkrypnyk]

Summary by CodeRabbit

• Style
  • Improved consistency in responsive banner styles and padding for intro banner types.
  • Updated font color for large display text to enhance visual hierarchy.
  • Unified breakpoint usage and streamlined padding calculations for banners.
• New Features
  • Added vertical spacing adjustments on login and password reset pages.
• Chores
  • Extended side navigation block configuration to refine label display and visibility rules.

[coderabbitai]

📝 Walkthrough

Walkthrough

The updates modify SCSS styling and variable declarations. Banner component styles now use a unified responsive breakpoint variable and streamlined padding logic, with added responsive padding for intro banners. In the base variables, font size and line-height variables no longer use the !default flag, and display-large typography colors for certain sizes are updated from 'secondary' to 'primary'. Additionally, a new block preprocess function for system_main_block was added to apply vertical spacing classes on login and password reset routes, integrated via the theme's main PHP file. The side navigation block configuration was also updated to adjust label display and expand visibility exclusions.

Changes

File(s)	Change Summary
.../components/03-organisms/banner/banner.scss	Replaced fixed breakpoint with variable; simplified padding logic; added responsive padding for intro banners.
.../components/variables.base.scss	Removed !default from font size/line-height variables; changed display-large color from 'secondary' to 'primary' for 'xxs' and 'm' sizes.
.../drevops.theme	Added include for system_main_block.inc; extended block preprocess function to call new system_main_block preprocess helper.
.../includes/system_main_block.inc	Added _drevops_preprocess_block__system_main_block to add vertical spacing class on user login and password reset routes.
config/default/block.block.drevops_side_navigation.yml	Changed label_display from empty to '0'; expanded request_path visibility exclusion to include /user*.
tests/behat/features/login.feature	Added scenarios verifying vertical spacing class presence on login and password reset pages.

Sequence Diagram(s)

sequenceDiagram
    participant DrupalTheme
    participant BlockPreprocess
    participant SystemMainBlockPreprocess

    DrupalTheme->>BlockPreprocess: drevops_preprocess_block(variables)
    BlockPreprocess->>SystemMainBlockPreprocess: _drevops_preprocess_block__system_main_block(variables)
    SystemMainBlockPreprocess->>BlockPreprocess: Modify variables if route is user.login or user.pass
    BlockPreprocess->>DrupalTheme: Continue block preprocessing

Loading

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Lite

📥 Commits

Reviewing files that changed from the base of the PR and between 97cf18c and 5868bf0.

📒 Files selected for processing (4)

• config/default/block.block.drevops_side_navigation.yml (2 hunks)
• tests/behat/features/login.feature (1 hunks)
• web/themes/custom/drevops/drevops.theme (2 hunks)
• web/themes/custom/drevops/includes/system_main_block.inc (1 hunks)

🔇 Additional comments (7)

tests/behat/features/login.feature (1)

20-26: LGTM! Well-structured test scenarios.

The new Behat scenarios properly validate that the vertical spacing CSS class is applied to the system main block on login and password reset pages. The test structure is clear and the CSS selector correctly matches the expected output from the preprocessing function.

config/default/block.block.drevops_side_navigation.yml (2)

21-21: Good change to hide the block label.

Setting label_display: '0' appropriately hides the block label for the side navigation, which is the expected behavior for navigation blocks.

---

39-39: Appropriate expansion of visibility exclusions.

Adding /user* to the pages exclusion list makes sense given the new vertical spacing being applied to user-related pages. This prevents potential layout conflicts between the side navigation and the enhanced system main block styling.

web/themes/custom/drevops/drevops.theme (2)

10-10: Proper integration of the new include file.

The include statement is correctly placed with other preprocessing includes and follows the established pattern in the theme file.

---

35-35: Correct function integration in block preprocessing.

The call to _drevops_preprocess_block__system_main_block is properly placed before the existing banner preprocessing, ensuring the system main block logic is applied first.

web/themes/custom/drevops/includes/system_main_block.inc (2)

15-27: Implementation looks correct after previous fix.

The preprocessing function correctly:

• Validates the block type using the proper #base_plugin_id path (addressing the previous review concern)
• Checks for specific user routes (user.login and user.pass)
• Applies the ct-vertical-spacing--both CSS class appropriately

The logic is clear and the implementation aligns well with the test scenarios in the Behat file.

---

20-21: Consider caching implications of route access.

Using \Drupal::routeMatch() in a preprocess function is generally acceptable, but be aware this adds a service dependency. The current implementation is fine for this use case since route matching is lightweight.

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Lite

📥 Commits

Reviewing files that changed from the base of the PR and between 2f39907 and 9e81655.

📒 Files selected for processing (3)

• config/default/block.block.drevops_side_navigation.yml (2 hunks)
• web/themes/custom/drevops/drevops.theme (2 hunks)
• web/themes/custom/drevops/includes/system_main_block.inc (1 hunks)

🔇 Additional comments (6)

config/default/block.block.drevops_side_navigation.yml (2)

21-21: LGTM! Proper label display configuration.

Setting label_display to '0' correctly hides the block label, which is a common practice for navigation blocks.

---

39-39: Good alignment with theme changes.

The expansion of visibility exclusions to include /user* paths complements the new preprocessing logic being added for user login and password reset routes.

web/themes/custom/drevops/drevops.theme (2)

10-10: Proper include integration.

The new include statement follows the established pattern and correctly integrates the system main block preprocessing functionality.

---

35-35: Good preprocessing order.

The function call is correctly placed before the existing banner preprocessing, ensuring proper execution order for block modifications.

web/themes/custom/drevops/includes/system_main_block.inc (2)

20-24: LGTM! Proper route checking logic.

The route matching logic correctly identifies user login and password reset pages using the appropriate Drupal API.

---

26-26: Appropriate CSS class application.

The CSS class ct-vertical-spacing--both is properly added to the block attributes, following Drupal theming conventions.