diff --git a/docs-site/composer.lock b/docs-site/composer.lock index 8e2f652ea5..0858c8049a 100644 --- a/docs-site/composer.lock +++ b/docs-site/composer.lock @@ -466,7 +466,7 @@ }, { "name": "drupal/core-render", - "version": "8.6.12", + "version": "8.6.13", "source": { "type": "git", "url": "https://github.com/drupal/core-render.git", @@ -501,7 +501,7 @@ }, { "name": "drupal/core-utility", - "version": "8.6.12", + "version": "8.6.13", "source": { "type": "git", "url": "https://github.com/drupal/core-utility.git", diff --git a/packages/components/bolt-card/__tests__/__snapshots__/card.js.snap b/packages/components/bolt-card/__tests__/__snapshots__/card.js.snap index cac1080b85..4e88ddd4ad 100644 --- a/packages/components/bolt-card/__tests__/__snapshots__/card.js.snap +++ b/packages/components/bolt-card/__tests__/__snapshots__/card.js.snap @@ -11,9 +11,9 @@ exports[` Component add clickable functionality 1`] = `
- + Anthem Video Component basic usage 1`] = `
- + Anthem Video Component content tag variations: article 1`] = `
- + Anthem Video Component content tag variations: div 1`] = `
- + Anthem Video Component content tag variations: figcaption 1`] = `
- + Anthem Video Component content tag variations: section 1`] = `
- + Anthem Video Component tag variations: article 1`] = `
- + Anthem Video Component tag variations: div 1`] = `
- + Anthem Video Component tag variations: figure 1`] = `
- + Anthem Video Component tag variations: section 1`] = `
- + Anthem Video Component theme variations: dark 1`] = `
- + Anthem Video Component theme variations: light 1`] = `
- + Anthem Video Component theme variations: xdark 1`] = `
- + Anthem Video Component theme variations: xlight 1`] = `
- + Anthem Video Component with two buttons in footer 1`] = `
- + Anthem Video Component without footer 1`] = `
- + Anthem Video
- + Component with ratio object and lazyloading disabled compiles 1`] = ` - + A Rock Climber Component with ratio object and lazyloading d exports[` Component with ratio object compiles 1`] = ` - + A Rock Climber + + + + + + + + + +`; + +exports[`logo Logo with invert set to "true" renders properly 1`] = ` + + + + + + + + + + + +`; diff --git a/packages/components/bolt-logo/__tests__/fixtures/logo-paypal.svg b/packages/components/bolt-logo/__tests__/fixtures/logo-paypal.svg new file mode 100644 index 0000000000..25d0bfdc08 --- /dev/null +++ b/packages/components/bolt-logo/__tests__/fixtures/logo-paypal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/bolt-logo/__tests__/logo.js b/packages/components/bolt-logo/__tests__/logo.js new file mode 100644 index 0000000000..a33fd2bfd5 --- /dev/null +++ b/packages/components/bolt-logo/__tests__/logo.js @@ -0,0 +1,104 @@ +import { render } from '@bolt/twig-renderer'; +import { fixture as html } from '@open-wc/testing-helpers'; + +const timeout = 90000; + +describe('logo', () => { + let page; + + beforeEach(async () => { + page = await global.__BROWSER__.newPage(); + await page.goto('http://127.0.0.1:4444/', { + timeout: 0, + waitLoad: true, + waitNetworkIdle: true, // defaults to false + }); + }, timeout); + + test('Basic usage', async () => { + const results = await render('@bolt-components-logo/logo.twig', { + src: '/fixtures/logo-paypal.svg', + lazyload: false, + }); + expect(results.ok).toBe(true); + expect(results.html).toMatchSnapshot(); + }); + + test('Logo with invert set to "true" renders properly', async () => { + const results = await render('@bolt-components-logo/logo.twig', { + src: '/fixtures/logo-paypal.svg', + lazyload: false, + invert: true, + }); + expect(results.ok).toBe(true); + expect(results.html).toMatchSnapshot(); + }); + + test('Default renders', async function() { + const renderedLogoHTML = await page.evaluate(() => { + const logo = document.createElement('bolt-logo'); + + // TODO: Use actual image web component once those changes are merged in + logo.innerHTML = ` + + + + `; + + document.body.appendChild(logo); + + return logo.outerHTML; + }); + + // const renderedHTML = await html(renderedLogoHTML); + const image = await page.screenshot(); + + expect(image).toMatchImageSnapshot({ + failureThreshold: '0.01', + failureThresholdType: 'percent', + }); + + // TODO: match snapshot once image is converted to web component, HTML is hardcoded here + // expect(renderedHTML).toMatchSnapshot(); + }); + + test('Inverted renders as inverted', async function() { + const renderedLogoHTML = await page.evaluate(() => { + const logo = document.createElement('bolt-logo'); + const wrapper = document.createElement('div'); + + // TODO: Use actual image web component once those changes are merged in + logo.innerHTML = ` + + + + `; + + logo.classList.add('c-bolt-logo--invert'); + + wrapper.classList.add('t-bolt-dark'); + wrapper.appendChild(logo); + + document.body.appendChild(wrapper); + + return logo.outerHTML; + }); + + // const renderedHTML = await html(renderedLogoHTML); + const image = await page.screenshot(); + + expect(image).toMatchImageSnapshot({ + failureThreshold: '0.01', + failureThresholdType: 'percent', + }); + + // TODO: match snapshot once image is converted to web component, HTML is hardcoded here + // expect(renderedHTML).toMatchSnapshot(); + }); +}); diff --git a/packages/components/bolt-ratio/__tests__/__image_snapshots__/ratio-js-bolt-ratio-component-bolt-ratio-twig-ratio-prop-fraction-containing-a-decimal-2-snap.png b/packages/components/bolt-ratio/__tests__/__image_snapshots__/ratio-js-bolt-ratio-component-bolt-ratio-twig-ratio-prop-fraction-containing-a-decimal-2-snap.png new file mode 100644 index 0000000000..6d5200cabd Binary files /dev/null and b/packages/components/bolt-ratio/__tests__/__image_snapshots__/ratio-js-bolt-ratio-component-bolt-ratio-twig-ratio-prop-fraction-containing-a-decimal-2-snap.png differ diff --git a/packages/components/bolt-ratio/__tests__/__image_snapshots__/ratio-js-bolt-ratio-component-bolt-ratio-web-component-ratio-prop-fraction-containing-a-decimal-2-snap.png b/packages/components/bolt-ratio/__tests__/__image_snapshots__/ratio-js-bolt-ratio-component-bolt-ratio-web-component-ratio-prop-fraction-containing-a-decimal-2-snap.png new file mode 100644 index 0000000000..fb1a13afdf Binary files /dev/null and b/packages/components/bolt-ratio/__tests__/__image_snapshots__/ratio-js-bolt-ratio-component-bolt-ratio-web-component-ratio-prop-fraction-containing-a-decimal-2-snap.png differ diff --git a/packages/components/bolt-ratio/__tests__/__snapshots__/ratio.js.snap b/packages/components/bolt-ratio/__tests__/__snapshots__/ratio.js.snap index c1cdf0947c..de80eb4cfa 100644 --- a/packages/components/bolt-ratio/__tests__/__snapshots__/ratio.js.snap +++ b/packages/components/bolt-ratio/__tests__/__snapshots__/ratio.js.snap @@ -2,9 +2,9 @@ exports[` Component compiles 1`] = ` - + @@ -12,6 +12,26 @@ exports[` Component compiles 1`] = ` `; +exports[` Component twig - ratio prop fraction containing a decimal 1`] = ` + + + + + + + +`; + +exports[` Component web component - ratio prop fraction containing a decimal 1`] = ` + + + + + +`; + exports[` Component with HTML5 video renders 2`] = ` Component', () => { expect(renderedRatioHTML).toMatchSnapshot(); }); + + test(' twig - ratio prop fraction containing a decimal', async () => { + const results = await render('@bolt-components-ratio/ratio.twig', { + children: '', + ratio: '12/8.5', + }); + expect(results.ok).toBe(true); + expect(results.html).toMatchSnapshot(); + + const html = results.html; + + await page.evaluate(html => { + const div = document.createElement('div'); + div.innerHTML = `${html}`; + document.body.appendChild(div); + }, html); + + const image = await page.screenshot(); + expect(image).toMatchImageSnapshot({ + failureThreshold: '0.01', + failureThresholdType: 'percent', + }); + + const renderedRatioStyles = await page.evaluate(() => { + const ratio = document.querySelector('bolt-ratio'); + const innerRatio = ratio.renderRoot.querySelector('.c-bolt-ratio'); + return innerRatio.style.getPropertyValue('--aspect-ratio').trim(); + }); + + expect(renderedRatioStyles).toMatch(parseFloat(1200 / 850).toFixed(5)); + }); + + test(' web component - ratio prop fraction containing a decimal', async function() { + const renderedRatioHTML = await page.evaluate(() => { + const ratio = document.createElement('bolt-ratio'); + const img = document.createElement('img'); + img.setAttribute('src', '/fixtures/1200x850.jpg'); + ratio.setAttribute('ratio', '12/8.5'); + ratio.appendChild(img); + document.body.appendChild(ratio); + return ratio.outerHTML; + }); + expect(renderedRatioHTML).toMatchSnapshot(); + + const image = await page.screenshot(); + expect(image).toMatchImageSnapshot({ + failureThreshold: '0.01', + failureThresholdType: 'percent', + }); + + const renderedRatioStyles = await page.evaluate(() => { + const ratio = document.querySelector('bolt-ratio'); + const innerRatio = ratio.renderRoot.querySelector('.c-bolt-ratio'); + return innerRatio.style.getPropertyValue('--aspect-ratio').trim(); + }); + + expect(renderedRatioStyles).toMatch(parseFloat(1200 / 850).toFixed(5)); + }); }); diff --git a/packages/components/bolt-ratio/src/ratio.twig b/packages/components/bolt-ratio/src/ratio.twig index 70f0e3e246..8c9b040186 100644 --- a/packages/components/bolt-ratio/src/ratio.twig +++ b/packages/components/bolt-ratio/src/ratio.twig @@ -2,10 +2,11 @@ {% set ratioW = aspectRatioWidth ?? ratio|split("/")[0] ?? "1" %} {% set ratioH = aspectRatioHeight ?? ratio|split("/")[1] ?? "1" %} +{% set gcd = gcd(ratioW, ratioH) %} {% if ratioH and ratioW %} - {% set ratioH = ratioH >= 100 ? ratioH / 100 : ratioH %} - {% set ratioW = ratioW >= 100 ? ratioW / 100 : ratioW %} + {% set ratioH = ratioH / gcd %} + {% set ratioW = ratioW / gcd %} {% set attributes = attributes.setAttribute("ratio", "#{ratioW}/#{ratioH}") %} {% set inline_styles = [ diff --git a/packages/core-php/src/TwigExtensions/BoltExtras.php b/packages/core-php/src/TwigExtensions/BoltExtras.php index 981363f9bd..6562c9985c 100644 --- a/packages/core-php/src/TwigExtensions/BoltExtras.php +++ b/packages/core-php/src/TwigExtensions/BoltExtras.php @@ -21,6 +21,7 @@ public function getFunctions() { Bolt\TwigFunctions::github_url(), Bolt\TwigFunctions::merge_attributes(), Bolt\TwigFunctions::ssr(), + Bolt\TwigFunctions::gcd(), ]; } diff --git a/packages/core-php/src/TwigFunctions.php b/packages/core-php/src/TwigFunctions.php index c1b40bc6ae..8a6a7b0578 100644 --- a/packages/core-php/src/TwigFunctions.php +++ b/packages/core-php/src/TwigFunctions.php @@ -340,4 +340,23 @@ public static function github_url() { ]); } + // Return greatest common denominator of two integers + public static function gcd() { + return new Twig_SimpleFunction('gcd', function($a, $b) { + // If not an integer or string that can be converted to an integer, return 1 + // Note: gmp_gcd() throws error if passed a floating point number or string that is converted to one + if(is_int($a) && is_int($b)) { + return gmp_intval(gmp_gcd($a, $b)); + } elseif (is_string($a) && is_string($b)) { + if (!strpos($a, '.') && !strpos($b, '.')){ + return gmp_intval(gmp_gcd($a, $b)); + } else { + return 1; + } + } else { + return 1; + } + }); + } + } diff --git a/packages/drupal-twig-extensions/composer.lock b/packages/drupal-twig-extensions/composer.lock index 62f333b6e4..bef7a0c9f6 100644 --- a/packages/drupal-twig-extensions/composer.lock +++ b/packages/drupal-twig-extensions/composer.lock @@ -8,7 +8,7 @@ "packages": [ { "name": "drupal/core-render", - "version": "8.6.12", + "version": "8.6.13", "source": { "type": "git", "url": "https://github.com/drupal/core-render", @@ -42,7 +42,7 @@ }, { "name": "drupal/core-utility", - "version": "8.6.12", + "version": "8.6.13", "source": { "type": "git", "url": "https://github.com/drupal/core-utility.git", @@ -172,7 +172,7 @@ }, { "name": "Gert de Pagter", - "email": "BackEndTea@gmail.com" + "email": "backendtea@gmail.com" } ], "description": "Symfony polyfill for ctype functions", diff --git a/packages/twig-renderer/composer.lock b/packages/twig-renderer/composer.lock index 61e86b62f9..2d884d79cb 100644 --- a/packages/twig-renderer/composer.lock +++ b/packages/twig-renderer/composer.lock @@ -152,13 +152,13 @@ "dist": { "type": "path", "url": "../drupal-twig-extensions", - "reference": "7cc1bf90ba40e2ba2d82c8a481c2942222487183", + "reference": "1c6b4532fd16c3f0088f2a013de67c956547f594", "shasum": null }, "require": { "drupal/core-render": "^8.0.0", "drupal/core-utility": "^8.0.0", - "twig/twig": "^1.0" + "twig/twig": "^1.38.2" }, "type": "library", "autoload": { @@ -241,7 +241,7 @@ }, { "name": "drupal/core-render", - "version": "8.6.12", + "version": "8.6.13", "source": { "type": "git", "url": "https://github.com/drupal/core-render.git", @@ -276,7 +276,7 @@ }, { "name": "drupal/core-utility", - "version": "8.6.12", + "version": "8.6.13", "source": { "type": "git", "url": "https://github.com/drupal/core-utility.git", @@ -2239,7 +2239,7 @@ }, { "name": "Gert de Pagter", - "email": "BackEndTea@gmail.com" + "email": "backendtea@gmail.com" } ], "description": "Symfony polyfill for ctype functions",