@ec-europa/ecl-banners
Advanced tools
Comparing version 0.5.5 to 0.6.0
@@ -6,62 +6,12 @@ module.exports = { | ||
tags: ['molecule'], | ||
collated: true, | ||
collator(markup, item) { | ||
return ` | ||
<!-- Start: @${item.handle} -->\n | ||
<h3 class="ecl-heading ecl-heading--h3">${item.label}\n</h3>\n | ||
${markup}\n | ||
<!-- End: @${item.handle} -->\n | ||
`; | ||
context: { | ||
quote: { | ||
body: ` | ||
Nullam eget gravida sapien. Curabitur nec ligula varius tellus blandit auctor in non felis. | ||
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; | ||
Pellentesque in volutpat eros, ut fringilla tortor. | ||
`, | ||
author: 'President Juncker', | ||
}, | ||
}, | ||
default: 'background', | ||
variants: [ | ||
{ | ||
name: 'background', | ||
label: 'Background banner', | ||
context: { | ||
type: 'background', | ||
src: '../../assets/demo_images/abstract-demo-1.jpg', | ||
title: { | ||
label: 'White Paper on the future of Europe', | ||
href: '#', | ||
}, | ||
description: | ||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.', | ||
}, | ||
}, | ||
{ | ||
name: 'quote', | ||
label: 'Quote banner', | ||
context: { | ||
type: 'quote', | ||
quote: { | ||
body: ` | ||
Nullam eget gravida sapien. Curabitur nec ligula varius tellus blandit auctor in non felis. | ||
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; | ||
Pellentesque in volutpat eros, ut fringilla tortor. | ||
`, | ||
author: 'President Juncker', | ||
}, | ||
}, | ||
}, | ||
{ | ||
name: 'video', | ||
label: 'Video banner', | ||
context: { | ||
type: 'video', | ||
video: { | ||
src: 'http://ec.europa.eu/avservices/play.cfm?ref=I101631', | ||
iframe: true, | ||
ratio: '16-9', | ||
caption: | ||
'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit', | ||
}, | ||
description: ` | ||
<p class="ecl-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | ||
<p class="ecl-paragraph">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> | ||
<p class="ecl-paragraph">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> | ||
`, | ||
}, | ||
}, | ||
], | ||
}; |
@@ -5,3 +5,3 @@ { | ||
"license": "EUPL-1.1", | ||
"version": "0.5.5", | ||
"version": "0.6.0", | ||
"description": "ECL Banners", | ||
@@ -12,6 +12,4 @@ "main": "ecl-banners.scss", | ||
"@ec-europa/ecl-base": "^0.8.1", | ||
"@ec-europa/ecl-blockquotes": "^0.6.3", | ||
"@ec-europa/ecl-files": "^0.7.3", | ||
"@ec-europa/ecl-grid": "^0.3.3", | ||
"@ec-europa/ecl-typography-paragraphs": "^0.5.3" | ||
"@ec-europa/ecl-blockquotes": "^0.7.0", | ||
"@ec-europa/ecl-typography-paragraphs": "^0.6.0" | ||
}, | ||
@@ -18,0 +16,0 @@ "publishConfig": { |
@@ -7,16 +7,4 @@ # Banners | ||
## Type of banners | ||
### Guidance | ||
### Background banner | ||
- background image | ||
- title with a link | ||
- description | ||
### Quote Banner | ||
- quote | ||
#### Guidance | ||
- The author should always be available | ||
@@ -31,15 +19,4 @@ - The author can't be omitted | ||
### Video Banner | ||
- quote or audiovisual material (image or video) | ||
- paragraph | ||
## When to use this component | ||
### Background banner / Video banner | ||
Should be the first element on the content area of the page | ||
### Quote banner | ||
Within the content area of the page, at the top, bottom, or between blocks of content | ||
@@ -49,11 +26,2 @@ | ||
- do not use more than one background banner or video banner on a page | ||
- do not use more than two quote banners on a page | ||
## Technical details | ||
The banner itself is not a standalone component, one of the following modifiers should always be used: | ||
- `ecl-banner--background`: banner with background-image. | ||
- `ecl-banner--video`: banner with video and description. Based on ecl-files component. | ||
- `ecl-banner--quote`: banner with a quote. Based on ecl-blockquotes component. |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
3
3020
5
16
25
1
+ Added@ec-europa/ecl-base@0.10.0(transitive)
+ Added@ec-europa/ecl-blockquotes@0.7.2(transitive)
+ Added@ec-europa/ecl-typography-paragraphs@0.6.1(transitive)
- Removed@ec-europa/ecl-files@^0.7.3
- Removed@ec-europa/ecl-grid@^0.3.3
- Removed@ec-europa/ecl-blockquotes@0.6.3(transitive)
- Removed@ec-europa/ecl-buttons@0.12.0(transitive)
- Removed@ec-europa/ecl-files@0.7.3(transitive)
- Removed@ec-europa/ecl-grid@0.3.4(transitive)
- Removed@ec-europa/ecl-icons@0.8.0(transitive)
- Removed@ec-europa/ecl-links@0.9.0(transitive)
- Removed@ec-europa/ecl-typography-paragraphs@0.5.3(transitive)
- Removed@ec-europa/ecl-u-ratio@0.3.3(transitive)
- Removed@ec-europa/ecl-u-screen-reader@0.4.3(transitive)