feat(sbb-bar-container): initial implementation

[TomMenga]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the pull request tracker for a Pull Request (PR) that matches the one I want to submit, without success.

Issue

This PR Closes #3431

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)

See Review Guidelines for more information on what is checked during the review process.

Changes

Changes in this pull request:

Browsers

I tested the build on the following browsers:

• Firefox Desktop
• Chrome Desktop
• Edge Desktop
• Safari Desktop
• Chrome Mobile
• Safari Mobile

Screen readers

I tested the build on the following browsers:

• JAWS Firefox Desktop
• JAWS Chrome Desktop
• NVDA Firefox Desktop
• NVDA Chrome Desktop
• VoiceOver Safari Desktop
• VoiceOver Chrome Desktop
• VoiceOver Safari Mobile
• Android Accessibility Suite Chrome Mobile

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

Does this introduce a breaking change?

• Yes
• No

Other information

[gemini-code-assist]

Summary of Changes

Hello @TomMenga, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request delivers the initial implementation of the sbb-bar-container component. This new UI element provides a structured content area with a distinctive visual style, including a leading red band and adaptable background colors. The component is built with LitElement and includes all necessary styling, testing, and documentation to ensure its robustness and ease of use within the design system.

Highlights

• New Component: sbb-bar-container: Introduced a new web component, sbb-bar-container, designed to display content within a container featuring a prominent red band and standard page spacing.
• Styling and Customization: The component supports two background color variants, white (default) and milk, configurable via a property. It also integrates global and component-specific SCSS for consistent styling and responsiveness.
• Comprehensive Test Coverage: Added a full suite of tests including snapshot tests for DOM, Shadow DOM, and accessibility, basic unit tests, server-side rendering (SSR) tests, and visual regression tests across various configurations and viewports.
• Documentation and Storybook Integration: Provided detailed documentation in readme.md covering usage, style options, properties, and slots. Storybook stories were also created to showcase different component states and color variants.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• src/elements/bar-container.ts
  • Added the entry point for the new sbb-bar-container component.
• src/elements/bar-container/snapshots/bar-container.snapshot.spec.snap.js
  • Added snapshot tests for the component's DOM, Shadow DOM, and A11y tree.
• src/elements/bar-container/bar-container.component.ts
  • Implemented the SbbBarContainerElement LitElement, defining its structure, properties (like color), and content slot.
• src/elements/bar-container/bar-container.global.scss
  • Defined global SCSS variables and mixins for the bar container, including responsive background band heights and padding.
• src/elements/bar-container/bar-container.scss
  • Implemented component-specific SCSS for styling the bar container, including its background gradient and styling for slotted links.
• src/elements/bar-container/bar-container.snapshot.spec.ts
  • Added a snapshot test suite to verify the rendered output of the sbb-bar-container component.
• src/elements/bar-container/bar-container.spec.ts
  • Added a basic unit test to assert that an instance of SbbBarContainerElement is correctly rendered.
• src/elements/bar-container/bar-container.ssr.spec.ts
  • Added a server-side rendering (SSR) test to ensure the component hydrates correctly.
• src/elements/bar-container/bar-container.stories.ts
  • Added Storybook stories to demonstrate the sbb-bar-container component with different color properties and content.
• src/elements/bar-container/bar-container.visual.spec.ts
  • Added visual regression tests to check the component's appearance across various viewports and configurations.
• src/elements/bar-container/readme.md
  • Added comprehensive documentation for the sbb-bar-container component, detailing its usage, properties, and slots.
• src/elements/core/styles/core.scss
  • Integrated the new bar-container.global.scss into the core stylesheet, applying base and large breakpoint styles for the component.

Activity

• The pull request introduces the initial implementation of the sbb-bar-container feature.
• The PR description indicates that it closes issue feat(sbb-bar-container): component implementation #3431.
• The preflight and pull request checklists are not yet fully completed, suggesting ongoing work or pending review steps.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

---

New component takes flight, Red band leads, a guiding light, Code reviewed, all bright.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[DavideMininni-Fincons]

Looks good, added some ideas for improvement

[jeripeierSBB]

Nice work. I think we should discuss with @mcilurzo and @kyubisation whether we should make it easy to align the card on the grid (on sbb.ch I see various example where they have a smaller grid area for the card and link). Right now, when placing sbb-grid class on the sbb-bar-container (like a consumer could do), it needs a lot of manual fixes (but it would be possible). Maybe we should apply the grid as well, so it would be easier to just re-define the grid-area. Although with the current design, without a slot for the link, it makes it a little complicated as there are two grid rows to be specified. With a dedicated slot we could additional just define the vertical gap of the grid instead of the slotted rules.

with wrong spacing but defined on consumer side:

[jeripeierSBB]

LGTM! Will ask @mcilurzo for a UX review

[jeripeierSBB]

We postpone this feature approx. until autumn, as we would like to merge it with the sbb-lean-container.