@ecl/spotlight 5.0.0-alpha.22.4 → 5.0.0

package/README.md

@@ -9,18 +9,18 @@ npm install --save @ecl/spotlight
 ### Parameters
 
 - **"color_mode"** (string) (default: '') Name of the color mode
-- **"font_size"** (string) (default: 'l') Size of the title (can be 'm', 'l')
+- **"font_size"** (string) (default: 'm') Size of the title; can be 'm', 'l'
 - **"title"** (string) (default: '') Title of the spotlight
-- **"path"** (string) (default: '') Link url
-- **"header"** (string) (default: '') Header over the spotlight
-- **"picture"** (object) (default: {}): Image for the spotlight, following ECL Picture structure
-- **"has_anchor"** (boolean) (default: true): Should the visual anchor be displayed?
-- **"credit"** (string) (default: '') Credit for the image
-- **"full_width"** (boolean) (default: false) Full width spotlight (extend outside the grid)
-- **"extra_classes"** (string) (default: '')
-- **"extra_attributes"** (optional) (array) (default: [])
+- **"path"** (string) (default: '') Link URL for the title
+- **"header"** (string) (default: '') Header text above the spotlight title
+- **"picture"** (object) (default: {}) Image following ECL Picture structure
+- **"has_anchor"** (boolean) (default: true) Show the visual anchor indicator
+- **"credit"** (string) (default: '') Credit text for the image
+- **"full_width"** (boolean) (default: false) Full width spotlight (extends outside the grid)
+- **"extra_classes"** (string) (default: '') Extra classes (space separated)
+- **"extra_attributes"** (array) (default: []) Extra attributes
   - "name" (string) Attribute name, eg. 'data-test'
-  - "value" (optional) (string) Attribute value, eg: 'data-test-1'
+  - "value" (string) Attribute value, eg: 'data-test-1'
 
 ### Example:
 

package/package.json

@@ -2,16 +2,18 @@
   "name": "@ecl/spotlight",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "5.0.0-alpha.22.4",
+  "version": "5.0.0",
   "description": "ECL Spotlight",
+  "publishConfig": {
+    "access": "public"
+  },
   "style": "spotlight.scss",
   "dependencies": {
-    "@ecl/grid": "5.0.0-alpha.22.4",
-    "@ecl/mixins-typography": "5.0.0-alpha.22.4",
-    "@ecl/picture": "5.0.0-alpha.22.4"
+    "@ecl/picture": "5.0.0"
   },
-  "publishConfig": {
-    "access": "public"
+  "devDependencies": {
+    "@ecl/grid": "5.0.0",
+    "@ecl/mixins-typography": "5.0.0"
   },
   "repository": {
     "type": "git",
@@ -26,5 +28,5 @@
     "europa-component-library",
     "design-system"
   ],
-  "gitHead": "dca1381b81aee960100865a1abd0a38e5cec3453"
+  "gitHead": "70ad1f5d6ae8b6e11c7d2422c3d5e7a1a74adf57"
 }

package/spotlight-print.scss

@@ -129,12 +129,10 @@ $anchor-width-l: 232px;
   padding-block-end: map.get($spotlight, 'anchor', 'padding-block');
   padding-inline-end: inherit;
   position: absolute;
-  right: 0;
+  inset-inline-end: 0;
   width: $anchor-width-l;
 
   &:dir(rtl) {
-    left: 0;
-    right: auto;
     transform: scale(-1, 1);
   }
 }
@@ -142,12 +140,6 @@ $anchor-width-l: 232px;
 // Full width
 .ecl-spotlight--full-width {
   border-radius: 0;
-  left: 50%;
-  margin-inline-start: -50vw;
+  margin-inline: calc(50% - 50vw);
   width: 100vw;
-
-  &:dir(rtl) {
-    left: auto;
-    right: 50%;
-  }
 }

package/spotlight.html.twig

@@ -3,18 +3,18 @@
 {#
   Parameters:
   - "color_mode" (string) (default: '') Name of the color mode
-  - "font_size" (string) (default: 'l') Size of the title (can be 'm', 'l')
+  - "font_size" (string) (default: 'm') Size of the title; can be 'm', 'l'
   - "title" (string) (default: '') Title of the spotlight
-  - "path" (string) (default: '') Link url
-  - "header" (string) (default: '') Header over the spotlight
-  - "picture" (object) (default: {}): Image for the spotlight, following ECL Picture structure
-  - "has_anchor" (boolean) (default: true): Should the visual anchor be displayed?
-  - "credit" (string) (default: '') Credit for the image
-  - "full_width" (boolean) (default: false) Full width spotlight (extend outside the grid)
-  - "extra_classes" (string) (default: '')
-  - "extra_attributes" (optional) (array) (default: [])
+  - "path" (string) (default: '') Link URL for the title
+  - "header" (string) (default: '') Header text above the spotlight title
+  - "picture" (object) (default: {}) Image following ECL Picture structure
+  - "has_anchor" (boolean) (default: true) Show the visual anchor indicator
+  - "credit" (string) (default: '') Credit text for the image
+  - "full_width" (boolean) (default: false) Full width spotlight (extends outside the grid)
+  - "extra_classes" (string) (default: '') Extra classes (space separated)
+  - "extra_attributes" (array) (default: []) Extra attributes
     - "name" (string) Attribute name, eg. 'data-test'
-    - "value" (optional) (string) Attribute value, eg: 'data-test-1'
+    - "value" (string) Attribute value, eg: 'data-test-1'
 #}
 
 {# Internal properties #}

package/spotlight.scss

@@ -138,14 +138,8 @@ $anchor-width-l: 232px;
 // Full width
 .ecl-spotlight--full-width {
   border-radius: 0;
-  left: 50%;
-  margin-inline-start: -50vw;
+  margin-inline: calc(50% - 50vw);
   width: 100vw;
-
-  &:dir(rtl) {
-    left: auto;
-    right: 50%;
-  }
 }
 
 @include breakpoints.up('m') {
@@ -179,13 +173,8 @@ $anchor-width-l: 232px;
     padding-block-end: map.get($spotlight, 'anchor', 'padding-block');
     padding-inline-end: inherit;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     width: $anchor-width-m;
-
-    &:dir(rtl) {
-      left: 0;
-      right: auto;
-    }
   }
 }