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
feat: Ec component site header #33
Merged
Merged
Changes from 18 commits
Commits
Show all changes
22 commits
Select commit
Hold shift + click to select a range
9dd8553
Initial commit for EU Link
d06ee6a
Update README.md
6a21348
Initial commit for EC Site Header
e325c0e
Update tests
9db993d
Remove EU Link
d1734bc
Update yarn.lock
edbb724
Resolve conflicts
d60e9db
Update ec-components package.json
93f4681
Merge branch 'master' into ec-component-site-header
7616161
Remove default English settings
e140dca
Merge branch 'master' into ec-component-site-header
7fac7df
Update webpack.config.js for ec storybook
55639db
Update yarn.lock
53542ab
Update tests
8bb5340
Update tests v2
3f48e85
update snap
emeryro 565cfa4
merge master
emeryro db86360
Fix some bugs
2bfa415
Merge branch 'master' into ec-component-site-header
degliwe c89d15d
Update EC Search Form twig file
659a80d
Update EC Site Header files
447cebc
Update tests
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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 @@ | ||
| # ECL Twig - EC SIte Header component |
117 changes: 117 additions & 0 deletions
117
src/ec/packages/ec-component-site-header/__snapshots__/site-header.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,117 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`EC - Site Header default - renders correctly 1`] = ` | ||
| "<header class=\\"ecl-site-header\\"> | ||
| <div class=\\"ecl-site-header__container ecl-container\\"> | ||
| <div class=\\"ecl-site-header__banner\\"> | ||
| <a | ||
| class=\\"ecl-link ecl-link--standalone\\" | ||
| href=\\"/example-1\\" | ||
| aria-label=\\"European Commission\\" | ||
| ><img | ||
| alt=\\"European Commission logo\\" | ||
| title=\\"European Commission\\" | ||
| class=\\"ecl-site-header__logo-image\\" | ||
| src=\\"static/media/logo--en.30b933cc.svg\\" | ||
| /></a> | ||
| <div class=\\"ecl-site-header__selector\\"> | ||
| <a class=\\"ecl-link ecl-link--standalone\\" href=\\"/example\\" | ||
| >English<span class=\\"ecl-site-header__language-icon\\" | ||
| ><svg | ||
| class=\\"ecl-icon ecl-icon--m\\" | ||
| focusable=\\"false\\" | ||
| aria-hidden=\\"true\\" | ||
| > | ||
| <use xlink:href=\\"static/icons.svg#general--language\\"></use></svg | ||
| ><span class=\\"ecl-site-header__language-code\\">en</span></span | ||
| ></a | ||
| > | ||
| </div> | ||
| </div> | ||
| <form class=\\"ecl-search-form\\" role=\\"search\\"> | ||
| <div class=\\"ecl-form-group ecl-form-group--text-input\\"> | ||
| <input | ||
| id=\\"input-search\\" | ||
| name=\\"search\\" | ||
| type=\\"text\\" | ||
| placeholder=\\"\\" | ||
| class=\\"ecl-text-input ecl-search-form__text-input\\" | ||
| /> | ||
| </div> | ||
| <button | ||
| class=\\"ecl-button ecl-button--search ecl-search-form__button\\" | ||
| type=\\"submit\\" | ||
| > | ||
| <span class=\\"ecl-button__container\\" | ||
| ><span class=\\"ecl-button__label\\">Search</span | ||
| ><svg | ||
| class=\\"ecl-icon ecl-icon--m ecl-button__icon ecl-button__icon--after\\" | ||
| focusable=\\"false\\" | ||
| aria-hidden=\\"true\\" | ||
| > | ||
| <use xlink:href=\\"static/icons.svg#general--search\\"></use></svg | ||
| ></span> | ||
| </button> | ||
| </form> | ||
| </div> | ||
| </header> | ||
| " | ||
| `; | ||
|
|
||
| exports[`EC - Site Header translated - renders correctly 1`] = ` | ||
| "<header class=\\"ecl-site-header\\"> | ||
| <div class=\\"ecl-site-header__container ecl-container\\"> | ||
| <div class=\\"ecl-site-header__banner\\"> | ||
| <a | ||
| class=\\"ecl-link ecl-link--standalone\\" | ||
| href=\\"/example-1\\" | ||
| aria-label=\\"Commmission Européenne\\" | ||
| ><img | ||
| alt=\\"Commmission Européenne logo\\" | ||
| title=\\"Commmission Européenne\\" | ||
| class=\\"ecl-site-header__logo-image\\" | ||
| src=\\"static/media/logo--fr.a8aaa7ab.svg\\" | ||
| /></a> | ||
| <div class=\\"ecl-site-header__selector\\"> | ||
| <a class=\\"ecl-link ecl-link--standalone\\" href=\\"/example\\" | ||
| >Français<span class=\\"ecl-site-header__language-icon\\" | ||
| ><svg | ||
| class=\\"ecl-icon ecl-icon--m\\" | ||
| focusable=\\"false\\" | ||
| aria-hidden=\\"true\\" | ||
| > | ||
| <use xlink:href=\\"static/icons.svg#general--language\\"></use></svg | ||
| ><span class=\\"ecl-site-header__language-code\\">fr</span></span | ||
| ></a | ||
| > | ||
| </div> | ||
| </div> | ||
| <form class=\\"ecl-search-form\\" role=\\"search\\"> | ||
| <div class=\\"ecl-form-group ecl-form-group--text-input\\"> | ||
| <input | ||
| id=\\"input-search\\" | ||
| name=\\"search\\" | ||
| type=\\"text\\" | ||
| placeholder=\\"\\" | ||
| class=\\"ecl-text-input ecl-search-form__text-input\\" | ||
| /> | ||
| </div> | ||
| <button | ||
| class=\\"ecl-button ecl-button--search ecl-search-form__button\\" | ||
| type=\\"submit\\" | ||
| > | ||
| <span class=\\"ecl-button__container\\" | ||
| ><span class=\\"ecl-button__label\\">Recherche</span | ||
| ><svg | ||
| class=\\"ecl-icon ecl-icon--m ecl-button__icon ecl-button__icon--after\\" | ||
| focusable=\\"false\\" | ||
| aria-hidden=\\"true\\" | ||
| > | ||
| <use xlink:href=\\"static/icons.svg#general--search\\"></use></svg | ||
| ></span> | ||
| </button> | ||
| </form> | ||
| </div> | ||
| </header> | ||
| " | ||
| `; |
56 changes: 56 additions & 0 deletions
56
src/ec/packages/ec-component-site-header/docs/site-header.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,56 @@ | ||
| # ECL Twig - EC Site Header | ||
|
|
||
| npm package: `@ecl-twig/ec-component-site-header` | ||
|
|
||
| ```shell | ||
| npm install --save @ecl-twig/ec-component-site-header | ||
| ``` | ||
|
|
||
| ## Site Header | ||
|
|
||
| ### Parameters | ||
|
|
||
| - "search_form" (associative array) (default: predefined structure): EC Search Form component structure | ||
| - "language" (associative array) (default: predefined structure): Language switcher settings. format: | ||
| - "url": (string) (default: ''): URL for switcher | ||
| - "label": (string) (default: ''): Switcher language label, eg. 'English', 'Français', etc. | ||
| - "code": (string) (default: ''): Switcher language code, eg. 'en', 'fr', etc. | ||
| - "header_link" (associative array) (default: predefined structure): Link settings for header link. format: | ||
| - "url": (string) (default: ''): URL for link | ||
| - "aria_label": (string) (default: ''): Aria-label attribute value | ||
| - "header_image" (associative array) (default: predefined structure): Heading image settings. format: | ||
| - "src": (string) (default: ''): URL for image | ||
| - "alt": (string) (default: ''): Alt attribute for image | ||
| - "title": (string) (default: ''): Title attribute for image | ||
| - "icon_file_path" (string) (default: ''): URL to icons file | ||
| - "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 : | ||
|
|
||
| ```twig | ||
| {% include 'path/to/site-header.html.twig' with { | ||
| icon_file_path: '/path-to-the-icons-file', | ||
| language: { | ||
| url: '/example', | ||
| code: 'en', | ||
| label: 'English', | ||
| }, | ||
| header_link: { | ||
| url: '/example-1', | ||
| aria_label: 'European Commission', | ||
| }, | ||
| header_image: { | ||
| src: '', | ||
| alt: 'European Commission logo', | ||
| title: 'European Commission', | ||
| }, | ||
| search_form: { | ||
| button: { | ||
| label: 'Search', | ||
| }, | ||
| }, | ||
| } %} | ||
| ``` |
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,34 @@ | ||
| { | ||
| "name": "@ecl-twig/ec-component-site-header", | ||
| "author": "European Commission", | ||
| "license": "EUPL-1.1", | ||
| "version": "0.0.1-alpha", | ||
| "description": "ECL Twig - EC Site Header", | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "dependencies": { | ||
| "@ecl-twig/ec-component-search-form": "^0.0.1-alpha", | ||
| "@ecl-twig/ec-component-icon": "^0.0.1-alpha" | ||
| }, | ||
| "devDependencies": { | ||
| "@ecl/ec-resources-icons": "~2.1.0", | ||
| "@ecl/ec-resources-logo": "~2.1.0", | ||
| "@ecl/ec-specs-search-form": "~2.1.0", | ||
| "@ecl/ec-component-search-form": "^2.1.1" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/ec-europa/ecl-twig.git" | ||
| }, | ||
| "bugs": { | ||
| "url": "https://github.com/ec-europa/ecl-twig/issues" | ||
| }, | ||
| "homepage": "https://github.com/ec-europa/ecl-twig", | ||
| "keywords": [ | ||
| "ecl", | ||
| "europa-component-library", | ||
| "design-system", | ||
| "twig" | ||
| ] | ||
| } |
129 changes: 129 additions & 0 deletions
129
src/ec/packages/ec-component-site-header/site-header.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,129 @@ | ||
| {# | ||
| Parameters: | ||
| - "search_form" (associative array) (default: predefined structure): EC Search Form component structure | ||
| - "language" (associative array) (default: predefined structure): Language switcher settings. format: | ||
| { | ||
| url: (string) (default: ''): URL for switcher | ||
| label: (string) (default: ''): Switcher language label, eg. 'English', 'Français', etc. | ||
| code: (string) (default: ''): Switcher language code, eg. 'en', 'fr', etc. | ||
| }, | ||
| - "header_link" (associative array) (default: predefined structure): Link settings for header link. format: | ||
| { | ||
| url: (string) (default: ''): URL for link | ||
| aria_label: (string) (default: ''): Aria-label attribute value | ||
| }, | ||
| - "header_image" (associative array) (default: predefined structure): Heading image settings. format: | ||
| { | ||
| src: (string) (default: ''): URL for image | ||
| alt: (string) (default: ''): Alt attribute for image | ||
| title: (string) (default: ''): Title attribute for image | ||
| } | ||
| - "icon_file_path" (string) (default: ''): URL to icons file | ||
| - "extra_classes" (string) (default: '') | ||
| - "extra_attributes" (array) (default: []): format: [ | ||
| { | ||
| "name" (string) (default: ''), | ||
| "value" (string) (default: '') | ||
| }, | ||
| ... | ||
| ] | ||
| #} | ||
|
|
||
| {# Default variables #} | ||
| {% set _search_form = { | ||
| text_input: { | ||
| id: 'input-search', | ||
| name: 'search', | ||
| extra_classes: 'ecl-search-form__text-input' | ||
| }, | ||
| button: { | ||
| variant: 'search', | ||
| icon: { | ||
| type: 'general', | ||
| name: 'search', | ||
| path: _icon_file_path, | ||
| }, | ||
| label: 'Search', | ||
| extra_classes: 'ecl-search-form__button' | ||
| } | ||
| } | ||
| %} | ||
|
|
||
| {% set _language = { | ||
| url: '', | ||
| label: '', | ||
| code: '' | ||
| } | ||
| %} | ||
|
|
||
| {% set _header_link = { | ||
| url: '', | ||
| aria_label: '' | ||
| } | ||
| %} | ||
|
|
||
| {% set _header_image = { | ||
| src: '', | ||
| alt: '', | ||
| title: '', | ||
| } | ||
| %} | ||
|
|
||
| {% set _css_class = 'ecl-site-header' %} | ||
| {% set _extra_attributes = '' %} | ||
| {% set _icon_file_path = icon_file_path|default('') %} | ||
|
|
||
| {# Merge options #} | ||
| {% if language is defined and language is not empty %} | ||
| {% set _language = _language|merge(language) %} | ||
| {% endif %} | ||
|
|
||
| {% if header_link is defined and header_link is not empty %} | ||
| {% set _header_link = _header_link|merge(header_link) %} | ||
| {% endif %} | ||
|
|
||
| {% if header_image is defined and header_image is not empty %} | ||
| {% set _header_image = _header_image|merge(header_image) %} | ||
| {% endif %} | ||
|
|
||
| {% if search_form.text_input is defined and search_form.text_input is not empty %} | ||
| {% set _search_form = _search_form|merge({ text_input: _search_form.text_input|merge(search_form.text_input) }) %} | ||
| {% endif %} | ||
|
|
||
| {% if search_form.button is defined and search_form.button is not empty %} | ||
| {% set _search_form = _search_form|merge({ button: _search_form.button|merge(search_form.button) }) %} | ||
| {% endif %} | ||
|
|
||
| {# Internal logic - Process properties #} | ||
| {% 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 #} | ||
| {% spaceless %} | ||
| <header class="{{- _css_class -}}"{{- _extra_attributes|raw -}}> | ||
| <div class="ecl-site-header__container ecl-container"> | ||
| <div class="ecl-site-header__banner"> | ||
| <a class="ecl-link ecl-link--standalone" href="{{- _header_link.url -}}" aria-label="{{- _header_link.aria_label -}}"> | ||
| <img alt="{{- _header_image.alt -}}" title="{{- _header_image.title -}}" class="ecl-site-header__logo-image" src="{{- _header_image.src -}}" /> | ||
| </a> | ||
| <div class="ecl-site-header__selector"> | ||
| <a class="ecl-link ecl-link--standalone" href="{{- _language.url -}}"> | ||
| {{- _language.label -}} | ||
| <span class="ecl-site-header__language-icon"> | ||
| {%- include '../ec-component-icon/icon.html.twig' with { icon: { path: _icon_file_path, type: 'general', name: 'language' } } -%} | ||
| <span class="ecl-site-header__language-code">{{- _language.code -}}</span> | ||
| </span> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| {%- include '../ec-component-search-form/search-form.html.twig' with _search_form -%} | ||
| </div> | ||
| </header> | ||
| {% endspaceless %} | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
missing class
ecl-site-header__searchhereThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed in 659a80d
I had to modify the file
search-form.html.twiginEC Search Formin c89d15d because I founded a small bug there. But it does not affect the tests or other files so I think we can approve it here.