@ewc-lib/ewc-banner

EWC Banner Component

Overview

The EWC Banner component provides a standardized banner for Eurostat web applications. It offers a consistent visual identity across Eurostat digital products while allowing for customization to meet specific application needs.

Features

• Responsive design that adapts to different screen sizes
• Customizable title and subtitle
• Optional call-to-action button with custom event
• Eurostat branding with official logos
• Accessibility compliant

Installation

npm install @ewc-lib/ewc-banner

Usage

Import the component in your application:

// Using ES modules
import '@ewc-lib/ewc-banner';

// Or using CommonJS
require('@ewc-lib/ewc-banner');

Then use it in your HTML:

<ewc-banner 
  maintitle="Your Main Title" 
  subtitle="Your Subtitle" 
  button-text="Button Text" 
  show-button>
</ewc-banner>

Properties

Property	Attribute	Type	Default	Description
showButton	show-button	Boolean	false	Whether to display the call-to-action button
maintitle	maintitle	String	""	The main title text for the banner
subtitle	subtitle	String	""	The subtitle text for the banner
buttonText	button-text	String	""	The text to display on the button

Events

Event Name	Description
button-click	Fired when the button is clicked. The embedding application can listen for this event and handle it as needed

Working with the button-click Event

When a user clicks the button in the EWC Banner, the component dispatches a custom event named button-click. This event:

• Bubbles up through the DOM tree (bubbles: true)
• Crosses shadow DOM boundaries (composed: true)
• Contains no additional data

Direct Event Listener

The most straightforward approach is to add an event listener directly to the banner element:

// Get a reference to the banner element
const banner = document.querySelector('ewc-banner');

// Add an event listener for the button-click event
banner.addEventListener('button-click', () => {
  console.log('Button was clicked!');
  // Your code to handle the click goes here
});

Examples

Basic Banner

<ewc-banner 
  maintitle="Population Statistics" 
  subtitle="Explore demographic data across Europe">
</ewc-banner>

Banner with Button

<ewc-banner 
  maintitle="Economic Indicators" 
  subtitle="Latest economic data and analysis" 
  button-text="View Dashboard" 
  show-button>
</ewc-banner>

<script>
  // Add event listener to handle button click
  document.querySelector('ewc-banner').addEventListener('button-click', () => {
    console.log('Button clicked');
    // Handle the button click, e.g., show a modal or navigate to another page
  });
</script>

Programmatically Created Banner

You can also create and configure the banner programmatically:

// Import the component (if not already imported)
import '@ewc-lib/ewc-banner';

// Create a new banner element
const banner = document.createElement('ewc-banner');

// Set properties
banner.maintitle = "Programmatically Created Banner";
banner.subtitle = "This banner was created using JavaScript";
banner.buttonText = "Learn More";
banner.showButton = true;

// Add event listener for button click
banner.addEventListener('button-click', () => {
  console.log('Button clicked');
  // Handle the button click as needed
});

// Add the banner to the DOM
document.body.prepend(banner);

// You can also update properties dynamically
setTimeout(() => {
  banner.maintitle = "Updated Title";
  banner.subtitle = "Properties can be changed at runtime";
}, 5000);

Accessibility

The EWC Banner component is designed with accessibility in mind:

• Proper semantic HTML structure with header element
• Keyboard navigable elements
• Sufficient color contrast
• Screen reader friendly with appropriate ARIA attributes

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

European Union Public License (EUPL)