### Start Website Development Server
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/docs/developers-start-here.md
Starts the development server for the project's website.
```bash
yarn start:website
```
--------------------------------
### Install Gallery Component
Source: https://context7.com/ec-europa/europa-component-library/llms.txt
Install the Gallery component using npm. This component provides a lightbox-capable media gallery.
```bash
npm install --save @ecl/twig-component-gallery
```
--------------------------------
### Install Blockquote Component
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/implementations/twig/components/blockquote/README.md
Install the blockquote component using npm.
```shell
npm install --save @ecl/twig-component-blockquote
```
--------------------------------
### Install Media Container Component
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/implementations/twig/components/media-container/README.md
Install the media container component using npm.
```shell
npm install --save @ecl/twig-component-media-container
```
--------------------------------
### Display In-Page Navigation Example
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/website/src/pages/ec/components/navigation/inpage-navigation/docs/code.mdx
Use the Playground component to render an example of the in-page navigation. This requires importing the Playground and Html components, as well as the specific markup for the in-page navigation example.
```javascript
import { Playground, Html } from '@ecl/website-components';
import inpageNavigationExample from '../demo';
```
--------------------------------
### Install Social Media Follow Component
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/implementations/twig/components/social-media-follow/README.md
Install the social media follow component using npm.
```shell
npm install --save @ecl/twig-component-social-media-follow
```
--------------------------------
### Install Preset with npm
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/README.md
Install a specific ECL preset using npm. Ensure you have Node.js v20.9.0 or compatible.
```bash
npm install @ecl/preset-ec
```
--------------------------------
### Install ECL Inpage Navigation Component
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/implementations/twig/components/inpage-navigation/README.md
Install the inpage-navigation component using npm.
```shell
npm install --save @ecl/twig-component-inpage-navigation
```
--------------------------------
### Install ECL File Upload Status Composition
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/implementations/twig/compositions/file-upload-status/README.md
Install the package using npm.
```shell
npm install --save @ecl/twig-composition-file-upload-status
```
--------------------------------
### Default Skip Link Example
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/website/src/pages/ec/components/navigation/skip-link/docs/code.mdx
Renders the default skip link component using the Playground and Html components. Ensure '@ecl/website-components' is installed and imported.
```javascript
import { Playground, Html } from '@ecl/website-components';
import skipLink from '../demo';
```
--------------------------------
### Install Preset with Yarn
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/README.md
Install a specific ECL preset using yarn. Ensure you have Node.js v20.9.0 or compatible.
```bash
yarn add @ecl/preset-ec
```
--------------------------------
### Install Description List Component
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/implementations/twig/components/description-list/README.md
Install the description list component using npm. This command adds the package to your project's dependencies.
```shell
npm install --save @ecl/twig-component-description-list
```
--------------------------------
### Install Site Header Component
Source: https://context7.com/ec-europa/europa-component-library/llms.txt
Install the Site Header component using npm. This component provides the full EC/EU site header.
```bash
npm install --save @ecl/twig-component-site-header
```
--------------------------------
### Blockquote Playground Example
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/website/src/pages/ec/components/blockquote/docs/code.mdx
This snippet shows how to use the Playground component to render the Blockquote component with its demo markup. Ensure '@ecl/website-components' is installed.
```javascript
import { Playground, Html } from '@ecl/website-components';
import blockquote from '../demo';
```
--------------------------------
### Select Component Initialization and Methods
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/website/src/pages/ec/components/forms/select/docs/api.mdx
This section details how to initialize the Select component, both automatically and manually, and how to retrieve an instance. It also covers the `autoInit` method with custom labels and how to get a component instance using `ECL.components.get()`.
```APIDOC
## Select Component API
### Initialization
There are two primary ways to initialize the Select and Select Multiple components:
#### Automatic Initialization
Add the `data-ecl-auto-init="Select"` attribute to the component's markup. Then, call `ECL.autoInit()` when your page is ready or on a custom event.
#### Manual Initialization
1. Get the target element using DOM selectors.
2. Create a new instance of `ECL.Select` by passing the element to the constructor.
3. Invoke the `init()` method on the instance.
```js
var elt = document.querySelector('[data-ecl-select-multiple]');
var select = new ECL.Select(elt);
select.init();
```
### `autoInit` Method
It's also possible to use the `Select`'s `autoInit` method and pass specific labels for the element:
```js
var select = ECL.Select.autoInit(
document.querySelector('[data-ecl-select-multiple]'),
{ defaultText: 'string', searchText: 'string', selectAllText: 'string' },
);
```
### Retrieving Component Instance
Once created, the new instance can be retrieved using `ECL.components.get()`:
```js
ECL.components.get(document.querySelector('[data-ecl-select-multiple]'));
```
```
--------------------------------
### Manual Initialization with autoInit and Custom Labels
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/website/src/pages/ec/components/forms/select/docs/api.mdx
Shows how to use the Select's autoInit method for manual initialization, allowing for custom default text, search text, and select all text.
```javascript
var select = ECL.Select.autoInit(
document.querySelector('[data-ecl-select-multiple]'),
{ defaultText: 'string', searchText: 'string', selectAllText: 'string' },
);
```
--------------------------------
### Tag Set Example
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/website/src/pages/eu/components/tag/docs/code.mdx
Demonstrates a group of tags, often used for categorization or displaying multiple related attributes. This setup is useful for managing collections of tags.
```javascript
import { Playground, Html } from '@ecl/website-components';
import { tagSet } from '../demo';
```
--------------------------------
### Basic File Upload Example
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/website/src/pages/ec/components/forms/file-upload/docs/code.mdx
Demonstrates the default configuration for a single file upload.
```html
```
--------------------------------
### Media Container Initialization
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/website/src/pages/ec/components/media/media-container/docs/api.mdx
Demonstrates the two methods for initializing the Media Container component: automatic and manual.
```APIDOC
## Setup
There are 2 ways to initialise the component.
### Automatic
Add `data-ecl-auto-init="MediaContainer"` attribute to component's markup:
```html
...
```
Use the `ECL` library's `autoInit()` (`ECL.autoInit()`) when your page is ready or other custom event you want to hook onto.
### Manual
Get target element, create an instance and invoke `init()`.
Given you have 1 element with an attribute `data-ecl-media-container` on the page:
```js
var elt = document.querySelector('[data-ecl-media-container]');
var mediaContainer = new ECL.MediaContainer(elt);
mediaContainer.init();
```
```
--------------------------------
### Select Component Initialization and Methods
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/website/src/pages/eu/components/forms/select/docs/api.mdx
This section covers the different ways to initialize the Select component and provides examples of its methods.
```APIDOC
## Select Component API
### Initialization
There are two primary methods for initializing the Select and Select Multiple components:
#### Automatic Initialization
Add the `data-ecl-auto-init="Select"` attribute to the component's HTML markup. Then, call `ECL.autoInit()` when the page is ready or on a custom event.
```javascript
ECL.autoInit();
```
#### Manual Initialization
1. Get the target element.
2. Create a new instance of `ECL.Select`.
3. Invoke the `init()` method.
```javascript
var elt = document.querySelector('[data-ecl-select-multiple]');
var select = new ECL.Select(elt);
select.init();
```
### `autoInit` Method with Options
It's also possible to use the `Select`'s `autoInit` method and provide specific labels for the element:
```javascript
var select = ECL.Select.autoInit(
document.querySelector('[data-ecl-select-multiple]'),
{ defaultText: 'string', searchText: 'string', selectAllText: 'string' },
);
```
### Retrieving an Instance
Once an instance is created, it can be retrieved using the `ECL.components.get()` method:
```javascript
ECL.components.get(document.querySelector('[data-ecl-select-multiple]'));
```
### API Reference
Refer to the external API documentation for detailed information on available methods and properties.
```
--------------------------------
### ECL Builder Configuration Example
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/tools/builder/README.md
Defines the build process for scripts, styles, and file copying. Use this to specify entry points, destinations, and compilation options.
```javascript
const path = require('path');
const isProd = process.env.NODE_ENV === 'production';
module.exports = {
// Compile entry.js
scripts: [
{
entry: path.resolve(__dirname, 'src/entry.js'),
dest: path.resolve(__dirname, 'dist/output.js'),
options: {
sourceMap: isProd ? false : 'inline',
moduleName: 'myModule',
},
},
],
// Compile entry.scss
styles: [
{
entry: path.resolve(__dirname, 'src/entry.scss'),
dest: path.resolve(__dirname, 'dist/output.css'),
options: {
sourceMap: isProd ? 'file' : true,
minify: true,
},
},
],
// Copy files from src to dest
copy: [
{
from: path.resolve(__dirname, 'src/fonts'),
to: path.resolve(__dirname, 'dist/fonts'),
},
{
from: path.resolve(__dirname, 'src/images'),
to: path.resolve(__dirname, 'dist/images'),
},
],
};
```
--------------------------------
### Install EC or EU preset via npm
Source: https://context7.com/ec-europa/europa-component-library/llms.txt
Use npm to install the EC or EU preset bundles. These bundles contain all components for a specific system.
```bash
# Install the EC or EU preset
npm install @ecl/preset-ec
# or
npm install @ecl/preset-eu
```
--------------------------------
### Start Netlify CMS Proxy Server
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/website/public/admin/README.md
Run this command in your project's root directory to start the Netlify CMS proxy server for local development.
```bash
yarn netlify-cms-proxy-server
```
--------------------------------
### Install ECL Page Header Component
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/implementations/twig/components/page-header/README.md
Install the page header component using npm.
```shell
npm install --save @ecl/twig-component-page-header
```
--------------------------------
### Modal Initialization and Usage
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/website/src/pages/ec/components/modal/docs/api.mdx
Demonstrates how to initialize the Modal component automatically or manually, and how to retrieve an existing instance.
```APIDOC
## Setup
There are 2 ways to initialise the component.
### Automatic
Add `data-ecl-auto-init="Modal"` attribute to component's markup:
```html
...
```
Use the `ECL` library's `autoInit()` (`ECL.autoInit()`) when your page is ready or other custom event you want to hook onto.
### Manual
Get target element, create an instance and invoke `init()`.
Given you have 1 element with an attribute `data-ecl-modal` on the page:
```js
var elt = document.querySelector('[data-ecl-modal]');
var modal = new ECL.Modal(elt);
modal.init();
```
### Retrieve an existing instance
If an existing instance needs to be updated, it can be retrieved this way:
```js
var elt = document.querySelector('[data-ecl-modal]');
var instance = ECL.components.get(elt);
```
```
--------------------------------
### Install Fact and Figures Component
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/implementations/twig/components/fact-figures/README.md
Install the Fact and Figures Twig component using npm.
```shell
npm install --save @ecl/twig-component-fact-figures
```
--------------------------------
### Start Development Server
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/website/README.md
Use this command to start the local development server for the ECL website. This is typically used during active development to see changes in real-time.
```sh
yarn start
```
--------------------------------
### FileDownload Initialization
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/website/src/pages/eu/components/file/docs/api.mdx
Demonstrates how to initialize the FileDownload component automatically or manually.
```APIDOC
## Setup
There are 2 ways to initialise the component.
### Automatic
Add `data-ecl-auto-init="FileDownload"` attribute to component's markup:
```html
...
```
Use the `ECL` library's `autoInit()` (`ECL.autoInit()`) when your page is ready or other custom event you want to hook onto.
### Manual
Get target element, create an instance and invoke `init()`.
Given you have 1 element with an attribute `data-ecl-file` on the page:
```js
var elt = document.querySelector('[data-ecl-file]');
var file = new ECL.FileDownload(elt);
file.init();
```
```
--------------------------------
### Default Select List Example
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/website/src/pages/eu/components/forms/select/docs/code.mdx
Demonstrates the default single select list functionality. Ensure the necessary imports are present.
```html
```
--------------------------------
### Icon Accessibility Example
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/website/src/pages/ec/components/icon/docs/code.mdx
Provides an example of how to add markup for icons used as decorative images to improve accessibility.
```html
```
--------------------------------
### Install ECL Twig Page Home
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/implementations/twig/pages/page-home/README.md
Install the ECL Twig Page Home npm package using npm.
```shell
npm install --save @ecl/twig-page-home
```
--------------------------------
### Grid Layout with Responsive Columns
Source: https://github.com/ec-europa/europa-component-library/blob/v4-dev/src/website/src/pages/ec/utilities/layout/grid/docs/usage.mdx
Shows how to create responsive column layouts that adapt to different screen sizes using breakpoint prefixes like `ecl-col-s-`, `ecl-col-m-`, etc. This example defines columns for small, medium, and large viewports.
```html