@bolt/components-image - npm Package Compare versions

Comparing version 3.5.0 to 3.6.0

__tests__/image.js

@@ -1,9 +0,3 @@
-import {
-  isConnected,
-  render,
-  renderString,
-  stopServer,
-  html,
-} from '../../../testing/testing-helpers';
-import schema from '../image.schema';
+import { render, stopServer } from '../../../testing/testing-helpers';
+
 describe('<bolt-image> Component', () => {
@@ -10,0 +4,0 @@ afterAll(async () => {

CHANGELOG.md

@@ -6,2 +6,18 @@ # Change Log
 
+# [3.6.0](https://github.com/bolt-design-system/bolt/tree/master/packages/components/bolt-image/compare/v3.5.4...v3.6.0) (2021-05-13)
+
+**Note:** Version bump only for package @bolt/components-image
+
+
+
+
+
+## [3.5.4](https://github.com/bolt-design-system/bolt/tree/master/packages/components/bolt-image/compare/v3.5.3...v3.5.4) (2021-04-21)
+
+**Note:** Version bump only for package @bolt/components-image
+
+
+
+
+
 # [3.5.0](https://github.com/bolt-design-system/bolt/tree/master/packages/components/bolt-image/compare/v3.4.3...v3.5.0) (2021-04-09)
@@ -8,0 +24,0 @@

package.json

 {
   "name": "@bolt/components-image",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "A container for displaying responsive image.",
@@ -20,5 +20,5 @@ "keywords": [
   "dependencies": {
-    "@bolt/components-ratio": "^3.5.0",
-    "@bolt/core-v3.x": "^3.5.0",
-    "@bolt/element": "^3.5.0",
+    "@bolt/components-ratio": "^3.6.0",
+    "@bolt/core-v3.x": "^3.6.0",
+    "@bolt/element": "^3.6.0",
     "@bolt/lazy-queue": "^3.1.0",
@@ -31,3 +31,3 @@ "lazysizes": "5.1.0"
   },
-  "gitHead": "0bf8439b2dedb1b23d6b013bb6cdbab55980fc67",
+  "gitHead": "228b3e20907b540011f209bdcf17d6ccf6a33cdb",
   "maintainers": [
@@ -34,0 +34,0 @@ {

src/image.twig

@@ -1,87 +0,81 @@
-{% set schema = bolt.data.components["@bolt-components-image"].schema %}
+{% set schema = bolt.data.components['@bolt-components-image'].schema %}
 
 {% if enable_json_schema_validation %}
-  {{ validate_data_schema(schema, _self) | raw }}
+  {{ validate_data_schema(schema, _self)|raw }}
 {% endif %}
 
-{% set image_data_bolt = bolt.data.images[src] %} {# Data from Bolt Manifest #}
-{% set image_data_twig = getImageData(src)  %} {# Data from processing image file #}
+{# DEPRECATED. 'ratio' should be a string, but boolean was previously supported. Boolean is now DEPRECATED. #}
+{% if ratio is sameas(false) or ratio is sameas(true) %}
+  {% set _ratio_bool = ratio %}
+{% else %}
+  {% set _ratio_string = ratio %}
+  {% set _ratio_split = _ratio_string|split('/') %}
+  {% if _ratio_split|length == 2 %}
+    {% set width = _ratio_split[0] %}
+    {% set height = _ratio_split[1] %}
+  {% endif %}
+{% endif %}
 
-{% set is_jpg = src|split('.')|last == "jpg" %}
-{% set is_gif = src|split('.')|last == "gif" %}
+{% set _image_data_bolt = bolt.data.images[src] %} {# Data from Bolt Manifest #}
+{% set _image_data_twig = getImageData(src)  %} {# Data from processing image file #}
 
-{% set display = display in display_options ? display : schema.properties.display.default %}
-{% set height = height|default(image_data_twig.height) %}
-{% set width = width|default(image_data_twig.width) %}
+{% set _is_jpg = src|split('.')|last == 'jpg' %}
+{% set _is_gif = src|split('.')|last == 'gif' %}
+
+{% set height = height|default(_image_data_twig.height) %}
+{% set width = width|default(_image_data_twig.width) %}
 {% set lazyload = lazyload ?? true %}
-{% set sizes = sizes|default("auto") %}
 {% set srcset = srcset|default(src) %}
 
-{% if image_data_bolt.srcset and not is_gif %}
-  {% set srcset = image_data_bolt.srcset %}
+{% if _image_data_bolt.srcset and not _is_gif %}
+  {% set srcset = _image_data_bolt.srcset %}
 {% endif %}
 
-{# Temp: prefix "ph" to preserve original value for web component, better pattern in the works #}
-{% set ph_color = placeholder_color|default(image_data_bolt.color|default(schema.properties.placeholder_color.default)) %}
+{# Temp: prefix 'ph' to preserve original value for web component, better pattern in the works #}
+{% set _ph_color = placeholder_color|default(_image_data_bolt.color|default(schema.properties.placeholder_color.default)) %}
 {# Note: image-specific base64 data is only generated in production mode, default data is used for local development #}
-{% set ph_image = placeholder_image|default(image_data_bolt.base64|default(schema.properties.placeholder_image.default)) %}
+{% set _ph_image = placeholder_image|default(_image_data_bolt.base64|default(schema.properties.placeholder_image.default)) %}
 
-{# 'ratio' should be a string, but boolean was previously supported. Boolean is now DEPRECATED. #}
-{% if ratio is sameas(false) or ratio is sameas(true) %}
-  {% set ratio_bool = ratio %}
-{% else %}
-  {% set ratio_string = ratio %}
-  {% set ratio_split = ratio_string|split("/") %}
-  {% if ratio_split|length == 2 %}
-    {% set width = ratio_split[0] %}
-    {% set height = ratio_split[1] %}
-  {% endif %}
-{% endif %}
-
-{% set use_ratio = useAspectRatio or ratio_bool ?? true %}
-{% set can_use_ratio = use_ratio is sameas(true) and ratio_string != "none" and width > 0 and height > 0 and not cover %}
+{% set _use_ratio = useAspectRatio or _ratio_bool ?? true %}
+{% set _can_use_ratio = _use_ratio is sameas(true) and _ratio_string != 'none' and width > 0 and height > 0 and not cover %}
 {# Only JPGs allowed, PNGs can have transparency and may not look right layered over placeholder #}
-{% set can_use_placeholder = can_use_ratio or cover %}
+{% set _can_use_placeholder = _can_use_ratio or cover %}
 
 {# Setup inline styles that will be added to the custom element  #}
-{% set inline_bg_color = can_use_placeholder and is_jpg ? "background-color: " ~ ph_color ~ "; " : "" %}
-{% set inline_width = max_width ? "width: " ~ max_width ~ "; " : "" %}
-{% set inline_max_width = max_width and "%" not in max_width ? "max-width: 100%; " : "" %}
-{% set inline_style = inline_bg_color ~ inline_width ~ inline_max_width %}
+{% set _inline_bg_color = _can_use_placeholder and _is_jpg ? 'background-color: ' ~ _ph_color ~ '; ' : '' %}
+{% set _inline_width = max_width ? 'width: ' ~ max_width ~ '; ' : '' %}
+{% set _inline_max_width = max_width and '%' not in max_width ? 'max-width: 100%; ' : '' %}
+{% set _inline_style = _inline_bg_color ~ _inline_width ~ _inline_max_width %}
 
-{% if inline_style|length %}
+{% if _inline_style|length %}
   {# Add inline styles to attributes object #}
   {% set attributes = attributes|default({})|merge({
-    style: attributes.style ~ inline_style|trim
+    style: attributes.style ~ _inline_style|trim
   }) %}
 {% endif %}
 
-{#--------------------#}
-{# STOP!!!!!!!!!#}
-{# The ONLY thing that can happen below here is creating and building the `attributes`, then calling the template - ALL data must be prepped by this point #}
-{#--------------------#}
+{# Variables #}
+{% set this = init(schema) %}
 
-{% set attributes = create_attribute(attributes | default({})) %}
-
 {% set image_classes = [
-  "c-bolt-image__image"
+  'c-bolt-image__image'
 ] %}
 
 {% set placeholder_classes = [
-  "c-bolt-image__image-placeholder"
+  'c-bolt-image__image-placeholder'
 ] %}
 
 {% set lazyload_classes = [
-  lazyload ? "c-bolt-image__lazyload",
-  lazyload ? "c-bolt-image__lazyload--fade" : "",
-  lazyload and is_jpg ? "c-bolt-image__lazyload--blur" : "",
-  lazyload ? "js-lazyload" : ""
+  this.data.lazyload.value ? 'c-bolt-image__lazyload',
+  this.data.lazyload.value ? 'c-bolt-image__lazyload--fade' : '',
+  this.data.lazyload.value and _is_jpg ? 'c-bolt-image__lazyload--blur' : '',
+  this.data.lazyload.value ? 'js-lazyload' : ''
 ] %}
 
-{% set image_attributes = create_attribute(imageAttributes | default({})).addClass(image_classes, lazyload_classes)
-  .setAttribute('alt', alt ? alt : "")
-  .setAttribute( (lazyload ? "data-" : null) ~ "srcset", srcset ? srcset : null)
-  .setAttribute( (lazyload ? "data-" : null) ~ "sizes", sizes)
-  .setAttribute('srcset', lazyload ? schema.properties.placeholder_image.default : srcset)
-  .setAttribute('src', src)
+{% set image_attributes = create_attribute(imageAttributes|default({})).addClass(image_classes, lazyload_classes)
+  .setAttribute('alt', this.data.alt.value ? this.data.alt.value : '')
+  .setAttribute((this.data.lazyload.value ? 'data-' : null) ~ 'srcset', this.data.srcset.value ? this.data.srcset.value : null)
+  .setAttribute((this.data.lazyload.value ? 'data-' : null) ~ 'sizes', this.data.sizes.value)
+  .setAttribute('srcset', this.data.lazyload.value ? schema.properties.placeholder_image.default : this.data.srcset.value)
+  .setAttribute('src', this.data.src.value)
 %}
@@ -91,22 +85,22 @@
 {% if zoom %}
-  {% set image_attributes = image_attributes.setAttribute("data-zoom", src) %}
+  {% set image_attributes = image_attributes.setAttribute('data-zoom', src) %}
 {% endif %}
 
 {% set image_fallback_attributes = create_attribute({}).addClass(image_classes)
-  .setAttribute('alt', alt ? alt : "")
-  .setAttribute('src', src)
-  .setAttribute(srcset ? "srcset" : "", srcset ? srcset : null)
+  .setAttribute('alt', this.data.alt.value ? this.data.alt.value : '')
+  .setAttribute('src', this.data.src.value)
+  .setAttribute(srcset ? 'srcset' : '', this.data.srcset.value ? this.data.srcset.value : null)
 %}
 
-{% if cover %}
-  {% set image_attributes = image_attributes.addClass("c-bolt-image--cover") %}
-  {% set image_fallback_attributes = image_fallback_attributes.addClass("c-bolt-image--cover") %}
+{% if this.data.cover.value %}
+  {% set image_attributes = image_attributes.addClass('c-bolt-image--cover') %}
+  {% set image_fallback_attributes = image_fallback_attributes.addClass('c-bolt-image--cover') %}
 {% endif %}
 
-{% if valign and cover %}
-  {% set image_attributes = image_attributes.setAttribute("style", "object-position: #{align|default('50%')} #{valign};") %}
-  {% set image_fallback_attributes = image_fallback_attributes.setAttribute("style", "object-position: #{align|default('50%')} #{valign};") %}
+{% if this.data.valign.value and this.data.cover.value %}
+  {% set image_attributes = image_attributes.setAttribute('style', 'object-position: #{align|default("50%")} #{valign};') %}
+  {% set image_fallback_attributes = image_fallback_attributes.setAttribute('style', 'object-position: #{align|default("50%")} #{valign};') %}
 {% endif %}
 
-{% set image_tag %}
+{% set _image_tag %}
   <img {{ image_attributes }} />
@@ -122,7 +116,7 @@
   <img {{ image_attributes.removeClass(image_classes, lazyload_classes).addClass(placeholder_classes)
-  .removeAttribute("data-srcset")
-  .removeAttribute("src")
-  .removeAttribute("data-sizes")
-  .removeAttribute("srcset")
-  .setAttribute("src", ph_image)
+  .removeAttribute('data-srcset')
+  .removeAttribute('src')
+  .removeAttribute('data-sizes')
+  .removeAttribute('srcset')
+  .setAttribute('src', _ph_image)
   }} />
@@ -133,36 +127,32 @@ {% endset %}
   {% if slot %}slot="{{ slot }}"{% endif %}
-  {% if src %}src="{{ src }}"{% endif %}
-  {% if valign %}valign="{{ valign }}"{% endif %}
-  {% if align %}align="{{ align }}"{% endif %}
-  {% if srcset %}srcset="{{ srcset }}"{% endif %}
-  {% if alt %}alt="{{ alt }}"{% endif %}
-  {% if max_width %}max-width="{{ max_width }}"{% endif %}
-  {% if sizes %}sizes="{{ sizes }}"{% endif %}
-  {% if ratio_string %}ratio="{{ ratio_string }}"{% elseif not use_ratio %}ratio="none"{% elseif can_use_ratio %}ratio="{{ width * 1 }}/{{ height * 1 }}"{% endif %}
-  {% if (placeholder_color or ph_color) %}placeholder-color="{{ placeholder_color | default(ph_color) }}"{% endif %}
-  {% if (placeholder_image or ph_image) %}placeholder-image="{{ placeholder_image | default(ph_image) }}"{% endif %}
+  {% if not lazyload %}no-lazy{% endif %}
+
+  {# DEPRECATED.  'magnify' is deprecated for device viewer-- when it is removed, 'zoom' will be unnecessary. #}
   {% if zoom %}zoom{% endif %}
-  {% if cover %}cover{% endif %}
-  {% if not lazyload %}no-lazy{% endif %}
-  {{ attributes }}
+
+  {% if _ratio_string %}ratio="{{ _ratio_string }}"{% elseif not _use_ratio %}ratio="none"{% elseif _can_use_ratio %}ratio="{{ width * 1 }}/{{ height * 1 }}"{% endif %}
+  {% if (placeholder_color or _ph_color) %}placeholder-color="{{ placeholder_color|default(_ph_color) }}"{% endif %}
+  {% if (placeholder_image or _ph_image) %}placeholder-image="{{ placeholder_image|default(_ph_image) }}"{% endif %}
+
+  {{ this.props|without('lazyload') }}
   >
 
   {% set children %}
-    {{ is_jpg ? image_placeholder : "" }}
-    {{ image_tag }}
+    {{ _is_jpg ? image_placeholder : '' }}
+    {{ _image_tag }}
   {% endset %}
 
   {% block image_content %}
-    {% if can_use_ratio %}
-      {% include "@bolt-components-ratio/ratio.twig" with {
-        ratio: width * 1 ~ "/" ~ height * 1,
+    {% if _can_use_ratio %}
+      {% include '@bolt-components-ratio/ratio.twig' with {
+        ratio: width * 1 ~ '/' ~ height * 1,
         children: children
       } only %}
     {% else %}
-      {% if can_use_placeholder %}
+      {% if _can_use_placeholder %}
         {{ image_placeholder}}
       {% endif %}
-      {{ image_tag }}
+      {{ _image_tag }}
     {% endif %}
   {% endblock %}
 </bolt-image>

New alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

210875

-0.02%

Lines of code

1226

-0.57%

Dependency changes

• Updated

  @bolt/components-ratio@^3.6.0

• Updated

  @bolt/core-v3.x@^3.6.0

• Updated

  @bolt/element@^3.6.0