feat(headers): rename and update doc --INNO-662

framework/components/ecl-page-headers/README.md

@@ -0,0 +1,28 @@
+# Page header
+
+## Why and how to use this component
+Users need a way to easily identify the branding, to search and change the language if needed.
+* the page title functions as the top level H1.
+* it is also used to construct the < title \> element (mandatory).
+* gives context and confidence to the user so they know they are looking at the right piece of content.
+* provides an H1 title for accessibility and SEO purposes.
+
+## Page header types
+
+| Default page header | Basic page header |
+|------------|------------|
+| Mandatory components | Mandatory components |
+| Breadcrumb	| Breadcrumb |
+| Page title | - |
+| Optional components | Optional components |
+| Meta items	| Meta items |
+| Site identification	| Site identification |
+| Page introduction |	- |
+
+## When to use this component
+
+| Default page header  | Basic page header |
+| --------------- | ---------- |
+| detail pages and landing pages | detail pages and landing pages|
+| no corporate menu | corporate menu |
+| default implementation | page title and page introduction elements should be placed on the body of the page |

framework/components/ecl-page-headers/ecl-page-headers.config.js

@@ -3,4 +3,37 @@ module.exports = {
   label: 'Page Headers',
   tags: ['organism'],
   status: 'ready',
+  variants: [
+    {
+      name: 'default',
+      context: {
+        variant: 'default',
+        identity: 'Digital single market',
+        title: 'Business, Economy, Euro',
+        introduction:
+          'EU economy, finance and the euro, and practical information for EU businesses and entrepreneurs on product safety, environmental regulations, trade with non-EU countries and competition rules.',
+        meta: {
+          type: 'News article',
+          date: '6 July 2015',
+          timestamp: '2015-07-06T17:44:28+02:00',
+          location: 'Brussels',
+        },
+      },
+    },
+    {
+      name: 'basic',
+      context: {
+        identity: 'Digital single market',
+      },
+    },
+    {
+      name: 'highlight',
+      context: {
+        variant: 'highlight',
+        label: 'Highlight',
+        highlight:
+          'Maecenas at mi <strong>molestie nulla</strong> tempor interdum sed sit amet ipsum.',
+      },
+    },
+  ],
 };

framework/components/ecl-page-headers/ecl-page-headers.twig

@@ -0,0 +1,48 @@
+{% if variant is defined and variant == "highlight" %}
+<div class="ecl-page-header ecl-page-header--highlight">
+  <div class="ecl-page-header__body">
+    <div class="ecl-page-header__label">{{ label }}</div>
+    <div class="ecl-page-header__highlight">
+      {{ highlight }}
+    </div>
+  </div>
+</div>
+{% else %}
+<div class="ecl-page-header">
+  {% include '@ec-europa/ecl-breadcrumbs' with { 'extraClass':'ecl-u-mh-xxs','segments': [{'target':'#','title':'European Commission'},{'target':'#','title':'Announcements'}] } %}
+
+  <div class="ecl-page-header__body">
+
+    {% if identity is defined %}
+    <div class="ecl-page-header__identity">
+      {{ identity }}
+    </div>
+    {% endif %}
+
+    {% if meta is defined %}
+    <div class="ecl-page-header__meta">
+      <div class="ecl-meta ecl-meta--header">
+        <span class="ecl-meta__item ecl-u-f-up">{{ meta.type }}</span>
+        <span class="ecl-meta__item">
+          <span class="date-display-single" property="dc:date" datatype="xsd:dateTime" content="{{ meta.timestamp }}">{{ meta.date }}</span>
+        </span>
+        <span class="ecl-meta__item">{{ meta.location }}</span>
+      </div>
+    </div>
+    {% endif %}
+
+    {% if title is defined %}
+    <div class="ecl-page-header__title">
+      <h1 class=" ecl-heading ecl-heading--h1 ecl-u-color-white">{{ title }}</h1>
+    </div>
+    {% endif %}
+
+    {% if introduction is defined %}
+    <div class="ecl-page-header__intro">
+      <p class="{{paragraph_class}}">{{ introduction }}</p>
+    </div>
+    {% endif %}
+
+  </div>
+</div>
+{% endif %}

test/functional/page-headers.js

@@ -1,10 +1,4 @@
-const variants = [
-  'corporate',
-  'default',
-  'highlight',
-  'improved-basic',
-  'improved-complete',
-];
+const variants = ['basic', 'default', 'highlight'];
 
 variants.forEach(variant => {
   describe(`ecl-page-headers--${variant}`, () => {