feat(profile-topbar): upgrade component - INNO-586 #238
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
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 |
|---|---|---|
| @@ -1,54 +1,27 @@ | ||
| <div class="context-nav"> | ||
| <span class="context-nav__label">{{ label }}</span> | ||
| {% if items is defined and items is iterable %} | ||
| <div class="context-nav__items"> | ||
| {% for item in items %} | ||
| <span class="context-nav__item"> | ||
| <a href="{{ item.target }}">{{ item.title }}</a> | ||
| </span> | ||
| {% endfor %} | ||
| {% endif %} | ||
| {% if items_hidden is defined and items_hidden is iterable %} | ||
| <div class="context-nav__expander"> | ||
| <span class="context-nav__more-button"> | ||
| {{ button_more }} | ||
| <span class="icon icon--down ecl-u-color-primary"></span> | ||
| </span> | ||
| <div class="context-nav__hidden"> | ||
| {% for hidden_item in items_hidden %} | ||
| <span class="context-nav__item"> | ||
| <a href="{{ hidden_item.target }}">{{ hidden_item.title }}</a> | ||
| </span> | ||
| {% endfor %} | ||
| </div> | ||
| </div> | ||
| {% endif %} | ||
| </div> | ||
| </div> |
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 |
|---|---|---|
| @@ -1,4 +1,3 @@ | ||
| # Profile topbar | ||
|
|
||
| Defines the profile topbar component. |
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 |
|---|---|---|
| @@ -1,6 +1,60 @@ | ||
| module.exports = { | ||
| title: 'Profile topbars', | ||
| label: 'Profile topbars', | ||
| status: 'ready', | ||
| tags: ['organism'], | ||
| context: { | ||
| _demo: { | ||
| scripts: | ||
| "document.addEventListener('DOMContentLoaded', function () { ECL.initExpandables(); });", | ||
| }, | ||
| profile: { | ||
| image: { | ||
| src: 'http://lorempixel.com/output/business-q-c-160-160-10.jpg', | ||
| alt: 'Example profile image', | ||
| }, | ||
| expandable: { | ||
| button: { | ||
| label: 'See details', | ||
| extraClass: 'ecl-expandable__button ecl-profile-topbar__pane-button', | ||
| extraAttributes: [ | ||
| { | ||
| name: 'aria-controls', | ||
| value: 'ecl-profile-topbar__expandable-1', | ||
| }, | ||
| { name: 'aria-expanded', value: 'false' }, | ||
| { name: 'id', value: 'ecl-profile-topbar__expandable-button-1' }, | ||
| { name: 'type', value: 'button' }, | ||
| ], | ||
| }, | ||
| expandable_body: { | ||
| extraAttributes: [ | ||
| { | ||
| name: 'aria-hidden', | ||
| value: 'true', | ||
| }, | ||
| { | ||
| name: 'aria-labelledby', | ||
| value: 'ecl-profile-topbar__expandable-button-1', | ||
| }, | ||
| { name: 'id', value: 'ecl-profile-topbar__expandable-1' }, | ||
| { name: 'class', value: 'ecl-profile-topbar__collapsible-area' }, | ||
| ], | ||
| }, | ||
| }, | ||
| }, | ||
| context_nav: { | ||
| label: 'Department', | ||
| items: [ | ||
| { | ||
| target: '#', | ||
| title: 'Trade', | ||
| }, | ||
| { | ||
| target: '#', | ||
| title: ' European Anti-Fraud Office', | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| }; |
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,26 @@ | ||
| /** | ||
| * ECL Profile Topbar | ||
| * @define profile-topbar | ||
| */ | ||
|
|
||
| .ecl-profile-topbar { | ||
| margin: 0; | ||
| padding-bottom: map-get($ecl-spacing, 'm'); | ||
| padding-top: map-get($ecl-spacing, 'm'); | ||
| } | ||
|
|
||
| .ecl-profile-topbar__pane { | ||
| height: 100%; | ||
| min-height: 160px; | ||
| position: relative; | ||
| } | ||
|
|
||
| .ecl-profile-topbar__pane-button { | ||
| bottom: 0; | ||
| position: absolute; | ||
| } | ||
|
|
||
| .ecl-profile-topbar__collapsible-area { | ||
| background-color: map-get($ecl-colors, 'grey-10'); | ||
| overflow: hidden; | ||
| } |
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 |
|---|---|---|
| @@ -1,31 +1,65 @@ | ||
| {# | ||
| Component interface: | ||
| - `extraClass` - classes to add to root component | ||
| - `extraAttributes` - additional attributes to add to root component | ||
|
|
||
| - `context_nav` - data for @ec-europa/ecl-context-navs component composition | ||
|
|
||
| - `profile` data contains profile-specific information | ||
| - `image` - data for @ec-europa/ecl-images component composition | ||
| - `expandable` - data related to the expandable part of the component | ||
| - `button` - data for @ec-europa/ecl-buttons component composition | ||
| - `expandable_body` - accepts `extraAttributes` for the expandable | ||
|
|
||
| - body (block): content in the expandable area (default: lorem ipsum text) | ||
| #} | ||
|
|
||
|
|
||
| {# Internal properties #} | ||
|
|
||
| {% set _cssClass = 'ecl-profile-topbar' %} | ||
| {% set _extraAttributes = '' %} | ||
|
|
||
| {# Internal logic - Process properties #} | ||
|
|
||
| {% if extraClass is defined %} | ||
| {% set _cssClass = _cssClass ~ ' ' ~ extraClass %} | ||
| {% endif %} | ||
|
|
||
| {% if extraAttributes is defined %} | ||
| {% for attr in extraAttributes %} | ||
| {% set _extraAttributes = _extraAttributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %} | ||
| {% endfor %} | ||
| {% endif %} | ||
|
|
||
| {# Print result #} | ||
|
|
||
| <div class="{{ _cssClass }}" {{ _extraAttributes }}> | ||
| <div class="ecl-container"> | ||
| <div class="ecl-row"> | ||
| <div class="ecl-col-md-2"> | ||
| {% include '@ec-europa/ecl-images' with profile.image %} | ||
| </div> | ||
| <div class="ecl-col-md-10 ecl-profile-topbar__pane"> | ||
| {% include '@ec-europa/ecl-context-navs' with context_nav %} | ||
| {% include '@ec-europa/ecl-buttons' with profile.expandable.button %} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div | ||
| {% if profile.expandable.expandable_body.extraAttributes is defined %} | ||
| {% for attr in profile.expandable.expandable_body.extraAttributes %} | ||
| {% set attribute = attr.name ~ '="' ~ attr.value ~ '"' %} | ||
| {{ attribute }} | ||
| {% endfor %} | ||
| {% endif %} | ||
| > | ||
| <div class="ecl-container"> | ||
| {% block body %} | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et augue quis est dignissim lacinia. Curabitur interdum iaculis sagittis. Maecenas sodales elit est, et suscipit nisl vulputate eget. Mauris vel pulvinar odio. Sed diam turpis, cursus vel congue vel, lobortis a ipsum. Donec vel quam nec enim tristique efficitur at eget nisl. | ||
| </p> | ||
| {% endblock %} | ||
| </div> | ||
| </div> | ||
| </div> | ||
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 |
|---|---|---|
| @@ -1,15 +1,25 @@ | ||
| { | ||
| "name": "@ec-europa/ecl-profile-topbars", | ||
| "version": "0.3.0", | ||
| "description": "", | ||
| "main": "ecl-profile-topbars.scss", | ||
| "style": "ecl-profile-topbars.scss", | ||
| "author": "European Commission", | ||
| "license": "EUPL-1.1", | ||
| "peerDependencies": { | ||
| "@ec-europa/ecl-buttons": "^0.7.1", | ||
| "@ec-europa/ecl-context-navs": "^0.3.1", | ||
| "@ec-europa/ecl-icons": "^0.5.1" | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/ec-europa/europa-component-library.git" | ||
| }, | ||
| "bugs": { | ||
| "url": "https://github.com/ec-europa/europa-component-library/issues" | ||
| }, | ||
| "homepage": "https://github.com/ec-europa/europa-component-library#readme" | ||
| } |
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
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,26 @@ | ||
| describe('profile-toolbars', () => { | ||
| before(() => { | ||
| // Set viewport size | ||
| browser.setViewportSize({ | ||
| width: 1400, | ||
| height: 600, | ||
|
There was a problem hiding this comment. Screenshots could be smaller (but no need to change it now). |
||
| }); | ||
|
|
||
| browser.pause(1000); | ||
| browser.url('ecl-profile-topbars.html'); | ||
| browser.injectAxeCore(); | ||
| }); | ||
|
|
||
| // Normal state | ||
| it('should match the reference screenshot', () => { | ||
| const screenshots = browser.checkDocument({ | ||
| name: 'profile-toolbars', | ||
| }); | ||
| expect(screenshots).to.matchReference(); | ||
| }); | ||
|
There was a problem hiding this comment. Please add accessibility tests too, as in other test files: |
||
|
|
||
| it('should be accessible', () => { | ||
| const a11yReport = browser.runAxeCore('ecl-profile-topbar').value; | ||
| expect(a11yReport).to.be.accessible; | ||
| }); | ||
| }); | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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.
Label of the button should change when expanding the text.
It will require an update of the expandable component; this can be done in a follow-up ticket.
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.
Created INNO-682 as a follow-up.