Skip to content

Commit

Permalink
feat(page header): use picture tag - FRONT-3880 (#2818)
Browse files Browse the repository at this point in the history
  • Loading branch information
@emeryro
emeryro authored Apr 3, 2023
1 parent 63433d9 commit 0e9db9a
Show file tree
Hide file tree
Showing 10 changed files with 394 additions and 100 deletions.
13 changes: 9 additions & 4 deletions src/implementations/twig/components/page-header/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,22 @@ npm install --save @ecl/twig-component-page-header
- **"title"** (string) (default: '') Title of header
- **"hide_title"** (boolean) (default: false) Hide the h1 title, for screen reader only
- **"description"** (string) (default: '') Description of header
- **"thumbnail"** (associative array) (default: {}) Thumbnail dipslayed alongside the description
- "alt" (string) Alternative text
- "src" (string) Image path
- **"picture_thumbnail"** (associative array) (default: {}): Image for thumbnail, following ECL Picture structure
- **"picture_background"** (associative array) (default: {}): Image for background, following ECL Picture structure
- **"meta"** (array) (default: []) Meta of header
- **"breadcrumb"** (associative array) (default: '') Predefined structure for the ECL Breadcrumb
- **"background_image_url"** (string) (default: '') Background image url
- **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated)
- **"extra_attributes"** (optional) (array) (default: []) Extra attributes
- "name" (string) Attribute name, eg. 'data-test'
- "value" (string) Attribute value, eg: 'data-test-1'

Deprecated

- **"background_image_url"** (string) (default: '') Background image url
- **"thumbnail"** (associative array) (default: {}) Thumbnail dipslayed alongside the description
- "alt" (string) Alternative text
- "src" (string) Image path

### Example :

<!-- prettier-ignore -->
Expand Down
243 changes: 223 additions & 20 deletions src/implementations/twig/components/page-header/__snapshots__/page-header.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,18 @@ exports[`Page Header Standardised Background image - renders correctly 1`] = `
>
<div
aria-hidden="true"
class="ecl-page-header__background"
style="background-image: url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg)"
/>
class="ecl-page-header__background-container"
>
<picture
class="ecl-picture ecl-page-header__picture-background"
>
<img
alt="Europe map"
class="ecl-page-header__background"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
/>
</picture>
</div>
<div
class="ecl-container"
>
Expand Down Expand Up @@ -164,11 +173,15 @@ exports[`Page Header Standardised Background image - renders correctly 1`] = `
<div
class="ecl-page-header__description-container"
>
<img
alt="Europe map"
class="ecl-page-header__description-thumbnail"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
/>
<picture
class="ecl-picture ecl-page-header__picture-thumbnail"
>
<img
alt="Europe map"
class="ecl-page-header__description-thumbnail"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
/>
</picture>
<p
class="ecl-page-header__description"
>
Expand Down Expand Up @@ -352,11 +365,6 @@ exports[`Page Header Standardised Default - renders correctly 1`] = `
<div
class="ecl-page-header__description-container"
>
<img
alt="Europe map"
class="ecl-page-header__description-thumbnail"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
/>
<p
class="ecl-page-header__description"
>
Expand Down Expand Up @@ -542,11 +550,6 @@ exports[`Page Header Standardised Default renders correctly with extra attribute
<div
class="ecl-page-header__description-container"
>
<img
alt="Europe map"
class="ecl-page-header__description-thumbnail"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
/>
<p
class="ecl-page-header__description"
>
Expand Down Expand Up @@ -729,12 +732,212 @@ exports[`Page Header Standardised Default renders correctly with extra class nam
</div>
<div
class="ecl-page-header__description-container"
>
<p
class="ecl-page-header__description"
>
Lorem ipsum dolor sit amet,
<a
href="/example"
>
consectetur adipiscing elit
</a>
. Quisque nec ullamcorper mi. Morbi interdum fermentum tempus. Nam nec rhoncus risus,
<a
class="ecl-link"
href="/example"
>
eget dictum elit
</a>
. Vestibulum gravida tincidunt venenatis.
</p>
</div>
</div>
</div>
</jest>
`;

exports[`Page Header Standardised with deprectated data renders correctly 1`] = `
<jest>
<div
class="ecl-page-header ecl-page-header--image"
>
<div
aria-hidden="true"
class="ecl-page-header__background-container"
>
<picture
class="ecl-picture ecl-page-header__picture-background"
>
<img
alt="Europe map"
class="ecl-page-header__description-thumbnail"
class="ecl-page-header__background"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
/>
</picture>
</div>
<div
class="ecl-container"
>
<nav
aria-label="You are here:"
class="ecl-breadcrumb ecl-page-header__breadcrumb"
data-ecl-auto-init="Breadcrumb"
data-ecl-breadcrumb="true"
>
<ol
class="ecl-breadcrumb__container"
>
<li
class="ecl-breadcrumb__segment"
data-ecl-breadcrumb-item="static"
>
<a
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link"
href="/example"
>
Home
</a>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
focusable="false"
role="presentation"
>
<use
xlink:href="/icons.svg#corner-arrow"
/>
</svg>
</li>
<li
class="ecl-breadcrumb__segment ecl-breadcrumb__segment--ellipsis"
data-ecl-breadcrumb-ellipsis=""
>
<button
aria-label="Click to expand"
class="ecl-button ecl-button--ghost ecl-breadcrumb__ellipsis"
data-ecl-breadcrumb-ellipsis-button=""
type="button"
>
…
</button>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
focusable="false"
role="presentation"
>
<use
xlink:href="/icons.svg#corner-arrow"
/>
</svg>
</li>
<li
class="ecl-breadcrumb__segment"
data-ecl-breadcrumb-item="expandable"
>
<a
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link"
href="/example"
>
About the European Commission
</a>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
focusable="false"
role="presentation"
>
<use
xlink:href="/icons.svg#corner-arrow"
/>
</svg>
</li>
<li
class="ecl-breadcrumb__segment"
data-ecl-breadcrumb-item="expandable"
>
<a
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link"
href="/example"
>
Organisational structure
</a>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
focusable="false"
role="presentation"
>
<use
xlink:href="/icons.svg#corner-arrow"
/>
</svg>
</li>
<li
class="ecl-breadcrumb__segment"
data-ecl-breadcrumb-item="static"
>
<a
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link"
href="/example"
>
How the Commission is organised
</a>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
focusable="false"
role="presentation"
>
<use
xlink:href="/icons.svg#corner-arrow"
/>
</svg>
</li>
<li
aria-current="page"
class="ecl-breadcrumb__segment ecl-breadcrumb__current-page"
data-ecl-breadcrumb-item="static"
>
News
</li>
</ol>
</nav>
<div
class="ecl-page-header__meta"
>
<span
class="ecl-page-header__meta-item"
>
Meta info
</span>
<span
class="ecl-page-header__meta-item"
>
DD Month YYYY
</span>
</div>
<div
class="ecl-page-header__title-container"
>
<h1
class="ecl-page-header__title"
>
Page title
</h1>
</div>
<div
class="ecl-page-header__description-container"
>
<picture
class="ecl-picture ecl-page-header__picture-thumbnail"
>
<img
alt="Europe map"
class="ecl-page-header__description-thumbnail"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
/>
</picture>
<p
class="ecl-page-header__description"
>
Expand Down
Loading

1 comment on commit 0e9db9a

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Deployed on https://v3-8-0-dev--europa-component-library.netlify.app

Please sign in to comment.