@ecl/splash-page 5.0.0-alpha.9 → 5.0.0

package/README.md

@@ -8,33 +8,23 @@ npm install --save @ecl/splash-page
 
 ### Parameters
 
-- **"logo"** (associative array) (default: predefined structure): Logo image settings. format:
-  - "title" (string) (default: ''): Logo title attribute.
-  - "alt" (string) (default: ''): Logo alt attribute.
-  - "path" (string) (default: ''): Logo URL.
-  - "src_desktop" (string) (default: ''): Desktop logo image file path
-  - "src_mobile" (string) (default: ''): Mobile logo image file path for EU only
-- **"title"** (string) (default: ''): Page title, eg. 'Select your language'
-- **"eu_category"** (string) (default: ''): Label for EU languages
-- **"non_eu_category"** (string) (default: ''): Label for non-EU languages
-- **"items"** (array) (default: []): (array) (default: []): format: [
-  {
-  "lang" (string) (default: '') Item language code, eg. 'en', 'fr', etc.
-  "label" (string) (default: '') Item language label, eg. 'English', 'Français', etc.
-  "path" (string) (default: '') Item language URL eg. '/example#language_en'.
-  "active" (boolean) (default: false) define if item is the active language.
-  },
-  ],
-- **"non_eu_items"** (array) (default: []): (array) (default: []): format: [
-  {
-  "lang" (string) (default: '') Item language code, eg. 'en', 'fr', etc.
-  "label" (string) (default: '') Item language label, eg. 'English', 'Français', etc.
-  "path" (string) (default: '') Item language URL eg. '/example#language_en'.
-  "active" (boolean) (default: false) define if item is the active language.
-  },
-  ],
-- **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated)
-- **"extra_attributes"** (optional) (array) (default: []) Extra attributes
+- **"logo"** (object) (default: {}) Logo image settings:
+  - "title" (string) (default: '') Logo title attribute
+  - "alt" (string) (default: '') Logo alt attribute
+  - "path" (string) (default: '') Logo link URL
+  - "src_desktop" (string) (default: '') Desktop logo image path
+  - "src_mobile" (string) (default: '') Mobile logo image path (EU only)
+- **"title"** (string) (default: '') Page title, eg. 'Select your language'
+- **"eu_category"** (string) (default: '') Label for EU languages group
+- **"non_eu_category"** (string) (default: '') Label for non-EU languages group
+- **"items"** (array) (default: []) EU language items; format:
+  - "lang" (string) (default: '') Language code, eg. 'en', 'fr'
+  - "label" (string) (default: '') Language label, eg. 'English', 'Français'
+  - "path" (string) (default: '') Language URL, eg. '/example#language_en'
+  - "active" (boolean) (default: false) Whether this is the currently active language
+- **"non_eu_items"** (array) (default: []) Non-EU language items (same structure as items)
+- **"extra_classes"** (string) (default: '') Extra classes (space separated)
+- **"extra_attributes"** (array) (default: []) Extra attributes
   - "name" (string) Attribute name, eg. 'data-test'
   - "value" (string) Attribute value, eg: 'data-test-1'
 

package/package.json

@@ -2,20 +2,21 @@
   "name": "@ecl/splash-page",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "5.0.0-alpha.9",
+  "version": "5.0.0",
   "description": "ECL Splash Page",
   "publishConfig": {
     "access": "public"
   },
   "style": "splash-page.scss",
   "dependencies": {
-    "@ecl/icon": "5.0.0-alpha.9",
-    "@ecl/link": "5.0.0-alpha.9",
-    "@ecl/picture": "5.0.0-alpha.9"
+    "@ecl/link": "5.0.0",
+    "@ecl/picture": "5.0.0"
   },
   "devDependencies": {
-    "@ecl/resources-ec-logo": "5.0.0-alpha.9",
-    "@ecl/resources-eu-logo": "5.0.0-alpha.9"
+    "@ecl/grid": "5.0.0",
+    "@ecl/mixins-typography": "5.0.0",
+    "@ecl/resources-ec-logo": "5.0.0",
+    "@ecl/resources-eu-logo": "5.0.0"
   },
   "repository": {
     "type": "git",
@@ -31,5 +32,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "9ce8853975dc4e5c768598fbecddf3646608bce1"
+  "gitHead": "70ad1f5d6ae8b6e11c7d2422c3d5e7a1a74adf57"
 }

package/splash-page.html.twig

@@ -12,29 +12,22 @@
     - "title": (string) (default: ''): Page title, eg. 'Select your language'.
     - "eu_category": (string) (default: ''): Label for EU languages
     - "non_eu_category": (string) (default: ''): Label for non-EU languages
-    - "items": (array) (default: []): (array) (default: []): format: [
+    - "items" (array) (default: []) EU language items; format: [
         {
-          "lang" (string) (default: '') Item language code, eg. 'en', 'fr', etc.
-          "label" (string) (default: '') Item language label, eg. 'English', 'Français', etc.
-          "path" (string) (default: '') Item language URL eg. '/example#language_en'.
-          "active" (boolean) (default: false) define if item is the active language.
-        },
-      ],
-    - "non_eu_items": (array) (default: []): (array) (default: []): format: [
-        {
-          "lang" (string) (default: '') Item language code, eg. 'en', 'fr', etc.
-          "label" (string) (default: '') Item language label, eg. 'English', 'Français', etc.
-          "path" (string) (default: '') Item language URL eg. '/example#language_en'.
-          "active" (boolean) (default: false) define if item is the active language.
-        },
-      ],
-    - "extra_classes" (string) (default: '')
+          "lang" (string) (default: '') Language code, eg. 'en', 'fr'
+          "label" (string) (default: '') Language label, eg. 'English', 'Français'
+          "path" (string) (default: '') Language URL, eg. '/example#language_en'
+          "active" (boolean) (default: false) Whether this is the active language
+        }, ...
+      ]
+    - "non_eu_items" (array) (default: []) Non-EU language items (same structure as items)
+    - "extra_classes" (string) (default: '') Extra classes (space separated)
     - "extra_attributes" (array) (default: []): format: [
         {
-          "name" (string) (default: ''),
-          "value" (optional) (string)
-        ...
-      ],
+          "name" (string) Attribute name, eg. 'data-test'
+          "value" (string) Attribute value, eg: 'data-test-1'
+        }, ...
+      ]
 #}
 
 {# Internal properties #}
@@ -134,7 +127,7 @@
           {{- _eu_category -}}
         </h2>
         {% endif %}
-        <ul class="ecl-splash-page__language-list">
+        <ul class="ecl-splash-page__language-list" translate="no">
           {% for _item in _items %}
           <li class="ecl-splash-page__language-item">
             {% set _link_label %}
@@ -169,7 +162,7 @@
           {{- _non_eu_category -}}
         </h2>
         {% endif %}
-        <ul class="ecl-splash-page__language-list">
+        <ul class="ecl-splash-page__language-list" translate="no">
           {% for _item in _non_eu_items %}
           <li class="ecl-splash-page__language-item">
           {% set _link_label %}

package/splash-page.scss

@@ -5,6 +5,7 @@
 
 @use 'sass:map';
 @use '@ecl/grid/mixins/breakpoints';
+@use '@ecl/mixins-typography/mixins';
 
 // Exposed variables
 $theme: null !default;
@@ -61,12 +62,16 @@ $language-list: null !default;
 }
 
 .ecl-splash-page__language-title {
-  font: map.get($language-list, 'header-font-mobile');
   margin: 0;
   padding-inline-start: calc(
     #{map.get($language-list, 'title-padding-start')} +
       #{map.get($language-list, 'item-active-border-width')}
   );
+
+  @include mixins.responsive-font(
+    map.get($language-list, 'header-typography'),
+    map.get($language-list, 'header-typography-font-weight')
+  );
 }
 
 .ecl-splash-page__language-content {
@@ -201,7 +206,6 @@ $language-list: null !default;
   }
 
   .ecl-splash-page__language-title {
-    font: map.get($language-list, 'header-font-desktop');
     font-weight: map.get($language-list, 'header-font-weight');
   }
 
@@ -268,8 +272,8 @@ $language-list: null !default;
 
   // Horizontal sections
   .ecl-splash-page__language-content:not(
-      .ecl-splash-page__language-content--stack
-    ) {
+    .ecl-splash-page__language-content--stack
+  ) {
     flex-direction: row;
 
     .ecl-splash-page__language-category {