This repository has been archived by the owner on May 2, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
# PR description Please drop a few lines about the PR: what it does, how to test it, etc. ## QA Checklist In order to ensure a safe and quick review, please check that your PR follow those guidelines: - [x] I have put the vanilla component as `devDependencies` - [x] I have put the specs package as `devDependencies` - [x] I have added the components directly used in the twig file (with `include` or `embed`) as `dependencies` - [x] My component is listed in `@ecl-twig/ec-components`'s `dependencies` - [x] My variables naming follow the guidelines (snake case for twig) - [x] I have provided tests - [x] I have provided documentation (for the "notes" tab) - [x] If my local `yarn.lock` contains changes, I have committed it - [x] I have given my PR the proper label (`pr: review needed` to indicate that I'm done and now waiting for a review ,`pr: wip` to indicate that I'm actively working on it ...)
- Loading branch information
Showing
10 changed files
with
604 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| __snapshots__ | ||
| docs | ||
| *.story.js | ||
| *.test.js | ||
| **/*.md |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| # ECL Twig - EC Hero Banner component |
254 changes: 254 additions & 0 deletions
254
src/ec/packages/ec-component-hero-banner/__snapshots__/hero-banner.test.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,254 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`EC - Hero Banner align-left - renders correctly 1`] = ` | ||
| <section | ||
| class="ecl-hero-banner ecl-hero-banner--default" | ||
| > | ||
| <div | ||
| class="ecl-container ecl-hero-banner__container" | ||
| > | ||
| <div | ||
| class="ecl-hero-banner__content" | ||
| > | ||
| <h1 | ||
| class="ecl-hero-banner__title" | ||
| > | ||
| EU Budget for the future (default) | ||
| </h1> | ||
| <p | ||
| class="ecl-hero-banner__description" | ||
| > | ||
| The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others. | ||
| </p> | ||
| <button | ||
| class="ecl-button ecl-button--call ecl-hero-banner__button" | ||
| type="default" | ||
| > | ||
| <span | ||
| class="ecl-button__container" | ||
| > | ||
| <span | ||
| class="ecl-button__label" | ||
| data-ecl-label="" | ||
| > | ||
| Subscribe | ||
| </span> | ||
| <svg | ||
| aria-hidden="true" | ||
| class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-button__icon ecl-button__icon--after" | ||
| focusable="false" | ||
| > | ||
| <use | ||
| xlink:href="static/icons.svg#ui--corner-arrow" | ||
| /> | ||
| </svg> | ||
| </span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| `; | ||
|
|
||
| exports[`EC - Hero Banner default - renders correctly 1`] = ` | ||
| <section | ||
| class="ecl-hero-banner ecl-hero-banner--default ecl-hero-banner--centered" | ||
| > | ||
| <div | ||
| class="ecl-container ecl-hero-banner__container" | ||
| > | ||
| <div | ||
| class="ecl-hero-banner__content" | ||
| > | ||
| <h1 | ||
| class="ecl-hero-banner__title" | ||
| > | ||
| EU Budget for the future (default) | ||
| </h1> | ||
| <p | ||
| class="ecl-hero-banner__description" | ||
| > | ||
| The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others. | ||
| </p> | ||
| <button | ||
| class="ecl-button ecl-button--call ecl-hero-banner__button" | ||
| type="default" | ||
| > | ||
| <span | ||
| class="ecl-button__container" | ||
| > | ||
| <span | ||
| class="ecl-button__label" | ||
| data-ecl-label="" | ||
| > | ||
| Subscribe | ||
| </span> | ||
| <svg | ||
| aria-hidden="true" | ||
| class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-button__icon ecl-button__icon--after" | ||
| focusable="false" | ||
| > | ||
| <use | ||
| xlink:href="static/icons.svg#ui--corner-arrow" | ||
| /> | ||
| </svg> | ||
| </span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| `; | ||
|
|
||
| exports[`EC - Hero Banner image - renders correctly 1`] = ` | ||
| <section | ||
| class="ecl-hero-banner ecl-hero-banner--image ecl-hero-banner--centered" | ||
| > | ||
| <div | ||
| class="ecl-hero-banner__image" | ||
| style="background-image:url(https://v2--europa-component-library.netlify.com/example-image.jpg)" | ||
| /> | ||
| <div | ||
| class="ecl-container ecl-hero-banner__container" | ||
| > | ||
| <div | ||
| class="ecl-hero-banner__content" | ||
| > | ||
| <h1 | ||
| class="ecl-hero-banner__title" | ||
| > | ||
| EU Budget for the future (image) | ||
| </h1> | ||
| <p | ||
| class="ecl-hero-banner__description" | ||
| > | ||
| The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others. | ||
| </p> | ||
| <button | ||
| class="ecl-button ecl-button--call ecl-hero-banner__button" | ||
| type="image" | ||
| > | ||
| <span | ||
| class="ecl-button__container" | ||
| > | ||
| <span | ||
| class="ecl-button__label" | ||
| data-ecl-label="" | ||
| > | ||
| Subscribe | ||
| </span> | ||
| <svg | ||
| aria-hidden="true" | ||
| class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-button__icon ecl-button__icon--after" | ||
| focusable="false" | ||
| > | ||
| <use | ||
| xlink:href="static/icons.svg#ui--corner-arrow" | ||
| /> | ||
| </svg> | ||
| </span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| `; | ||
|
|
||
| exports[`EC - Hero Banner image-shade - renders correctly 1`] = ` | ||
| <section | ||
| class="ecl-hero-banner ecl-hero-banner--image-shade ecl-hero-banner--centered" | ||
| > | ||
| <div | ||
| class="ecl-hero-banner__image" | ||
| style="background-image:url(https://v2--europa-component-library.netlify.com/example-image.jpg)" | ||
| /> | ||
| <div | ||
| class="ecl-container ecl-hero-banner__container" | ||
| > | ||
| <div | ||
| class="ecl-hero-banner__content" | ||
| > | ||
| <h1 | ||
| class="ecl-hero-banner__title" | ||
| > | ||
| EU Budget for the future (image shade) | ||
| </h1> | ||
| <p | ||
| class="ecl-hero-banner__description" | ||
| > | ||
| The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others. | ||
| </p> | ||
| <button | ||
| class="ecl-button ecl-button--call ecl-hero-banner__button" | ||
| type="image-shade" | ||
| > | ||
| <span | ||
| class="ecl-button__container" | ||
| > | ||
| <span | ||
| class="ecl-button__label" | ||
| data-ecl-label="" | ||
| > | ||
| Subscribe | ||
| </span> | ||
| <svg | ||
| aria-hidden="true" | ||
| class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-button__icon ecl-button__icon--after" | ||
| focusable="false" | ||
| > | ||
| <use | ||
| xlink:href="static/icons.svg#ui--corner-arrow" | ||
| /> | ||
| </svg> | ||
| </span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| `; | ||
|
|
||
| exports[`EC - Hero Banner primary - renders correctly 1`] = ` | ||
| <section | ||
| class="ecl-hero-banner ecl-hero-banner--primary ecl-hero-banner--centered" | ||
| > | ||
| <div | ||
| class="ecl-container ecl-hero-banner__container" | ||
| > | ||
| <div | ||
| class="ecl-hero-banner__content" | ||
| > | ||
| <h1 | ||
| class="ecl-hero-banner__title" | ||
| > | ||
| EU Budget for the future (primary) | ||
| </h1> | ||
| <p | ||
| class="ecl-hero-banner__description" | ||
| > | ||
| The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others. | ||
| </p> | ||
| <button | ||
| class="ecl-button ecl-button--call ecl-hero-banner__button" | ||
| type="primary" | ||
| > | ||
| <span | ||
| class="ecl-button__container" | ||
| > | ||
| <span | ||
| class="ecl-button__label" | ||
| data-ecl-label="" | ||
| > | ||
| Subscribe | ||
| </span> | ||
| <svg | ||
| aria-hidden="true" | ||
| class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-button__icon ecl-button__icon--after" | ||
| focusable="false" | ||
| > | ||
| <use | ||
| xlink:href="static/icons.svg#ui--corner-arrow" | ||
| /> | ||
| </svg> | ||
| </span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| `; |
41 changes: 41 additions & 0 deletions
41
src/ec/packages/ec-component-hero-banner/docs/hero-banner.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| # ECL Twig - EC Hero Banner | ||
|
|
||
| npm package: `@ecl-twig/ec-component-hero-banner` | ||
|
|
||
| ```shell | ||
| npm install --save @ecl-twig/ec-component-hero-banner | ||
| ``` | ||
|
|
||
| ## Hero Banner | ||
|
|
||
| ### Parameters | ||
|
|
||
| - "type" (string) (default: 'default') Type of banner (can be 'default','image','image-shade','primary') | ||
| - "title" (string) (default: '') Title of banner | ||
| - "image" (string) (default: '') Image for banner (required for image banner type) | ||
| - "description" (string) (default: '') Description of banner | ||
| - "centered" (bool) (default: true) Define if banner should be centered | ||
| - "button" (associative array) (default: predefined structure) predefined structure for EC Button component | ||
| - "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the form | ||
| - "extra_attributes" (optional) (array) (default: []) Extra attributes for the form | ||
| - "name" (string) Attribute name, eg. 'data-test' | ||
| - "value" (string) Attribute value, eg: 'data-test-1' | ||
|
|
||
| ### Example : | ||
|
|
||
| <!-- prettier-ignore --> | ||
| ```twig | ||
| {% include 'path/to/site-header.html.twig' with { | ||
| title: 'EU Budget for the future', | ||
| description: 'The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others.', | ||
| centered: true, | ||
| type: 'image', | ||
| image: 'url/path-to-image', | ||
| button: { | ||
| label: 'Subscribe', | ||
| icon: { | ||
| path: 'path-to-the-icon-file', | ||
| }, | ||
| }, | ||
| } %} | ||
| ``` |
60 changes: 60 additions & 0 deletions
60
src/ec/packages/ec-component-hero-banner/hero-banner.html.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| {% spaceless %} | ||
| {# | ||
| Parameters: | ||
| - "type" (string) (default: 'default') Type of banner (can be 'default','image','image-shade','primary') | ||
| - "title" (string) (default: '') Title of banner | ||
| - "image" (string) (default: '') Image for banner (required for image banner type) | ||
| - "description" (string) (default: '') Description of banner | ||
| - "centered" (bool) (default: true) Define if banner should be centered | ||
| - "button" (associative array) (default: predefined structure) predefined structure for EC Button component | ||
| - "extra_classes" (string) (default: '') | ||
| - "extra_attributes" (array) (default: []): format: [ | ||
| { | ||
| "name" (string) (default: ''), | ||
| "value" (string) (default: '') | ||
| }, | ||
| ... | ||
| ] | ||
| #} | ||
|
|
||
| {# variables #} | ||
| {% set _type = type|default('default') %} | ||
| {% set _centered = centered|default(true) %} | ||
| {% set _title = title|default('') %} | ||
| {% set _description = description|default('') %} | ||
| {% set _image = image|default('') %} | ||
|
|
||
| {% set _css_class = ['ecl-hero-banner ecl-hero-banner--'~_type]|join(' ') %} | ||
| {% set _extra_attributes = '' %} | ||
|
|
||
| {# Internal logic - Process properties #} | ||
| {% if _centered == true %} | ||
| {% set _css_class=_css_class~' ecl-hero-banner--centered' %} | ||
| {% endif %} | ||
|
|
||
| {% if extra_classes is defined and extra_classes is not empty %} | ||
| {% set _css_class = _css_class ~ ' ' ~ extra_classes %} | ||
| {% endif %} | ||
|
|
||
| {% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %} | ||
| {% for attr in extra_attributes %} | ||
| {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %} | ||
| {% endfor %} | ||
| {% endif %} | ||
|
|
||
| {# Print the result #} | ||
| <section class="{{ _css_class }}"{{ _extra_attributes }}> | ||
| {%- if _image is not empty and _type in ['image','image-shade'] -%} | ||
| <div class="ecl-hero-banner__image" style="background-image:url({{ _image }})"></div> | ||
| {%- endif -%} | ||
| <div class="ecl-container ecl-hero-banner__container"> | ||
| <div class="ecl-hero-banner__content"> | ||
| <h1 class="ecl-hero-banner__title">{{ _title }}</h1> | ||
| <p class="ecl-hero-banner__description">{{ _description }}</p> | ||
| {%- if button is defined and button is not empty -%} | ||
| {%- include '../ec-component-button/button.html.twig' with button|merge({ extra_classes: 'ecl-hero-banner__button' }) -%} | ||
| {%- endif -%} | ||
| </div> | ||
| </div> | ||
| </section> | ||
| {% endspaceless %} |
Oops, something went wrong.