OEL-3343: Copyright overlay.

.drone.yml

@@ -23,6 +23,12 @@ services:
     environment:
       - MYSQL_ALLOW_EMPTY_PASSWORD=yes
       - MYSQL_DATABASE=drupal
+  selenium:
+    image: git.fpfis.tech.ec.europa.eu/fpfis/dependency_proxy/containers/selenium/standalone-chrome:4.1.3-20220405
+    environment:
+      - DISPLAY=:99
+      - NODE_MAX_INSTANCES=5
+      - NODE_MAX_SESSION=5
 
 pipeline:
   npm-build:

bcl-builder.config.js

@@ -8,6 +8,15 @@ const includePaths = [nodeModules];
 
 module.exports = {
   styles: [
+    {
+      entry: path.resolve(outputFolder, "resources/sass/copyright_overlay.scss"),
+      dest: path.resolve(outputFolder, "assets/css/copyright-overlay.style.min.css"),
+      options: {
+        includePaths,
+        minify: true,
+        sourceMap: "file",
+      },
+    },
     {
       entry: path.resolve(outputFolder, "resources/sass/oe_bootstrap_theme.style.scss"),
       dest: path.resolve(outputFolder, "assets/css/oe_bootstrap_theme.style.min.css"),

docker-compose.yml

@@ -23,6 +23,16 @@ services:
       MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
     # ports:
     #   - 3306:3306
+  selenium:
+    image: selenium/standalone-chrome:4.1.3
+    environment:
+      - DISPLAY=:99
+      - VNC_NO_PASSWORD=1
+    ports:
+      - '5900:5900'
+    expose:
+      - '4444'
+    shm_size: 2g
   node:
     image: node:18.12.0
     user: "node"

includes/pattern.inc

@@ -99,6 +99,14 @@ function oe_bootstrap_theme_preprocess_pattern_accordion(array &$variables): voi
   $variables['accordion_id'] = Html::getUniqueId('bcl-accordion');
 }
 
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function oe_bootstrap_theme_preprocess_pattern_copyright_overlay(array &$variables): void {
+  $variables['modal_id'] = Html::getUniqueId('bcl-copyright-modal');
+  $variables['copy_selector'] = Html::getUniqueId('copy-selector');
+}
+
 /**
  * Implements hook_preprocess_HOOK().
  */

modules/oe_bootstrap_theme_helper/tests/src/Kernel/TwigExtensionTest.php

@@ -9,8 +9,8 @@
 use Drupal\Core\Render\RenderContext;
 use Drupal\Core\Template\Attribute;
 use Drupal\Core\Url;
-use Drupal\oe_bootstrap_theme\ValueObject\ImageValueObject;
 use Drupal\Tests\oe_bootstrap_theme\Kernel\AbstractKernelTestBase;
+use Drupal\oe_bootstrap_theme\ValueObject\ImageValueObject;
 use PHPUnit\Framework\ExpectationFailedException;
 use Symfony\Component\DomCrawler\Crawler;
 use Twig\Markup;

modules/oe_bootstrap_theme_helper/tests/src/Unit/BootstrapTableFilterTest.php

@@ -4,8 +4,8 @@
 
 namespace Drupal\Tests\oe_bootstrap_theme_helper\Unit;
 
-use Drupal\oe_bootstrap_theme_helper\Plugin\Filter\BootstrapTable;
 use Drupal\Tests\UnitTestCase;
+use Drupal\oe_bootstrap_theme_helper\Plugin\Filter\BootstrapTable;
 
 /**
  * Tests the bootstrap table filter.

oe_bootstrap_theme.libraries.yml

@@ -21,3 +21,17 @@ drupal.progress:
 inpage_navigation:
   js:
     resources/js/inpage_navigation.js: {}
+
+copy_clipboard:
+  js:
+    resources/js/copy_clipboard.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
+
+pattern.copyright_overlay:
+  css:
+    theme:
+      assets/css/copyright-overlay.style.min.css: {}
+  dependencies:
+    - oe_bootstrap_theme/copy_clipboard

phpunit.xml.dist

@@ -6,6 +6,8 @@
     <env name="SIMPLETEST_IGNORE_DIRECTORIES" value="vendor,node_modules,${drupal.root}"/>
     <env name="SIMPLETEST_BASE_URL" value="${drupal.base_url}"/>
     <env name="SIMPLETEST_DB" value="mysql://${drupal.database.user}:${drupal.database.password}@${drupal.database.host}:${drupal.database.port}/${drupal.database.name}"/>
+    <!-- @todo When dropping support for 10.2.x, rename "chromeOptions" to "goog:chromeOptions". -->
+    <env name="MINK_DRIVER_ARGS_WEBDRIVER" value='["${selenium.browser}", {"browserName":"chrome","chromeOptions":{"w3c": false, "args":["--no-sandbox", "--start-maximized", "--disable-gpu", "--window-size=1280,800", "--disable-dev-shm-usage", "--DNS-prefetch-disable", "--disable-translate", "--ignore-certificate-errors", "--test-type", "--disable-extensions", "--incognito", "--disable-infobars"]}}, "${selenium.host}:${selenium.port}/wd/hub"]'/>
   </php>
   <testsuites>
     <testsuite name="OpenEuropa Bootstrap Theme">

resources/js/copy_clipboard.js

@@ -0,0 +1,32 @@
+/**
+ * @file
+ * Attaches behaviors to copy text to clipboard for elements with data-copy-target attribute.
+ */
+(function (Drupal) {
+
+  const handleClick = function (event) {
+    const element = event.currentTarget;
+    const targetSelector = element.getAttribute('data-copy-target');
+    const targetElement = document.querySelector(targetSelector);
+
+    if (targetElement) {
+      const copyText = targetElement.innerText || targetElement.value;
+      navigator.clipboard.writeText(copyText);
+    }
+  };
+
+  Drupal.behaviors.copyClipboard = {
+    attach: function (context) {
+      once('oebt-clipcopy', '[data-copy-target]', context).forEach(function (element) {
+        element.addEventListener('click', handleClick);
+      });
+    },
+
+    detach: function (context, settings, trigger) {
+      once.remove('oebt-clipcopy', '[data-copy-target]', context).forEach(function (element) {
+        element.removeEventListener('click', handleClick);
+      });
+    }
+  };
+
+})(Drupal);

resources/sass/copyright_overlay.scss

@@ -0,0 +1,20 @@
+.copyright-overlay {
+  background-color: rgba(var(--bs-white-rgb),var(--bs-bg-opacity));
+  color: var(--bs-gray-700);
+  padding: 0 0.5rem;
+  display: inline-flex;
+  .copyright-preview {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 7rem;
+    font-size: 0.875rem;
+  }
+  .copyright-trigger {
+    font-size: 0.875rem;
+  }
+  .copyright-header {
+    font-size: 1.25rem;
+  }
+}

runner.yml.dist

@@ -30,6 +30,11 @@ drupal:
         - "vendor"
         - "${drupal.root}"
 
+selenium:
+  host: "http://selenium"
+  port: "4444"
+  browser: "chrome"
+
 commands:
   drupal:site-setup:
     - { task: "run", command: "drupal:symlink-project" }

templates/patterns/copyright_overlay/copyright_overlay.ui_patterns.yml

@@ -0,0 +1,30 @@
+copyright_overlay:
+  label: 'Copyright overlay'
+  description: 'A component to show copyright information.'
+  fields:
+    trigger_label:
+      type: text
+      label: 'Trigger label'
+      description: 'The label of the modal trigger. Optional.'
+      preview: 'View more'
+    modal_title:
+      type: text
+      label: 'Modal title'
+      description: 'The title of the modal header. Optional.'
+      preview: 'Copyright'
+    content:
+      type: render
+      label: 'Content'
+      description: 'Copyright overlay content.'
+      preview: '© Copyright ipsum amet <a href="#">John Doe</a> on <a href="#">Doe Images</a>.'
+  settings:
+    trigger_attributes:
+      type: attributes
+      label: Trigger attributes
+      description: Extra attributes for the modal trigger
+      allow_token: true
+    attributes:
+      type: attributes
+      label: Copyright overlay attributes
+      description: Extra attributes for the copyright overlay
+      allow_token: true

templates/patterns/copyright_overlay/pattern-copyright-overlay--preview.html.twig

@@ -0,0 +1,14 @@
+{#
+/**
+ * @file
+ * Template override for preview mode of "Copyright overlay" pattern.
+ */
+#}
+
+{{ pattern('copyright_overlay', {
+  content: content,
+}) }}
+
+{{ pattern('copyright_overlay', {
+  content: '© Second copyright element. Suspendisse vel mauris vitae ipsum blandit condimentum ut eget quam.',
+}) }}

templates/patterns/copyright_overlay/pattern-copyright-overlay.html.twig

@@ -0,0 +1,51 @@
+{#
+/**
+ * @file
+ * Copyright overlay pattern.
+ */
+#}
+{{ attach_library('oe_bootstrap_theme/pattern.copyright_overlay') }}
+
+{% set _footer %}
+  {% include '@oe-bcl/button' with {
+    label: 'Copy Copyright'|t,
+    attributes: create_attribute({
+      'data-bs-dismiss': 'modal',
+      'data-copy-target': '#' ~ copy_selector
+    })
+  } only %}
+{% endset %}
+
+{% set _content %}
+  <div{{ create_attribute({
+    'class': 'copyright-content',
+    'id': copy_selector
+  }) }}>
+    {{ content }}
+  </div>
+{% endset %}
+
+<div{{ attributes.addClass('copyright-overlay') }}>
+  <span class="copyright-preview">
+    {{ content }}
+  </span>
+
+  {{ pattern('link', {
+    label: trigger_label|default('View more'|t),
+    path: '#',
+    attributes: trigger_attributes
+      .addClass('copyright-trigger')
+      .setAttribute('data-bs-toggle', 'modal')
+      .setAttribute('data-bs-target', '#' ~ modal_id),
+  }) }}
+
+  {{ pattern('modal', {
+    'title': modal_title|default('Copyright'|t),
+    'show_close_button': true,
+    'body': _content,
+    'footer': _footer,
+    'attributes': create_attribute({
+      id: modal_id
+    })
+  }) }}
+</div>

tests/src/Functional/CheckboxSwitchWidgetTest.php

@@ -4,10 +4,10 @@
 
 namespace Drupal\Tests\oe_bootstrap_theme\Functional;
 
+use Drupal\Tests\BrowserTestBase;
 use Drupal\entity_test\Entity\EntityTest;
 use Drupal\field\Entity\FieldConfig;
 use Drupal\field\Entity\FieldStorageConfig;
-use Drupal\Tests\BrowserTestBase;
 
 /**
  * Tests the checkbox switch third party settings on compatible widgets.

tests/src/Functional/ThemeSettingsTest.php

@@ -4,8 +4,8 @@
 
 namespace Drupal\Tests\oe_bootstrap_theme\Functional;
 
-use Drupal\oe_bootstrap_theme\BackwardCompatibility;
 use Drupal\Tests\BrowserTestBase;
+use Drupal\oe_bootstrap_theme\BackwardCompatibility;
 
 /**
  * Tests the theme settings.

tests/src/FunctionalJavascript/CopyClipboardTest.php

@@ -0,0 +1,77 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\Tests\oe_bootstrap_theme\FunctionalJavascript;
+
+use Behat\Mink\Element\NodeElement;
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+
+/**
+ * Tests the copy to clipboard javascript behaviour.
+ */
+class CopyClipboardTest extends WebDriverTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'oe_bootstrap_theme';
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = [
+    'oe_bootstrap_theme_helper',
+    'system',
+    'ui_patterns',
+    'ui_patterns_settings',
+    'ui_patterns_library',
+  ];
+
+  /**
+   * Tests the copy to clipboard behavior in the copyright overlay.
+   */
+  public function testCopyToClipboard(): void {
+    $this->drupalLogin($this->drupalCreateUser([], NULL, TRUE));
+
+    $this->drupalGet('/patterns/copyright_overlay');
+
+    // Mock the clipboard API.
+    $this->getSession()->executeScript(<<<JS
+      navigator.clipboard = {
+        writeText: function(text) {
+          // Store the copied text in a variable.
+          window.copiedText = text;
+          return Promise.resolve();
+        }
+      };
+    JS);
+
+    $elements = $this->getSession()->getPage()->findAll('css', '.copyright-overlay');
+
+    $this->assertCopyrightCopiedToClipboard($elements['0'], '© Copyright ipsum amet John Doe on Doe Images.');
+    $this->assertCopyrightCopiedToClipboard($elements['1'], '© Second copyright element. Suspendisse vel mauris vitae ipsum blandit condimentum ut eget quam.');
+  }
+
+  /**
+   * Asserts that the text in the element corresponds to the clipboard.
+   *
+   * @param \Behat\Mink\Element\NodeElement $element
+   *   The copyright element.
+   * @param string $expected
+   *   The expected result.
+   */
+  protected function assertCopyrightCopiedToClipboard(NodeElement $element, string $expected): void {
+    $assert_session = $this->assertSession();
+
+    $assert_session->elementExists('css', '.copyright-trigger', $element)->click();
+    $modal = $assert_session->waitForElementVisible('css', '.modal.show');
+
+    $assert_session->elementExists('css', '[data-copy-target]', $modal)->click();
+
+    $actual = $this->getSession()->evaluateScript('return window.copiedText;');
+
+    $this->assertEquals($expected, $actual);
+  }
+
+}

tests/src/Kernel/MarkupRenderingTest.php

@@ -59,6 +59,7 @@ class MarkupRenderingTest extends KernelTestBase implements FormInterface {
     'card_layout',
     'carousel',
     'columns',
+    'copyright_overlay',
     'content_banner',
     'date_block',
     'description_list',

tests/src/Kernel/ValueObject/ImageValueObjectTest.php

@@ -4,13 +4,13 @@
 
 namespace Drupal\Tests\oe_bootstrap_theme\Kernel\ValueObject;
 
+use Drupal\Tests\oe_bootstrap_theme\Kernel\AbstractKernelTestBase;
 use Drupal\entity_test\Entity\EntityTest;
 use Drupal\field\Entity\FieldConfig;
 use Drupal\field\Entity\FieldStorageConfig;
 use Drupal\file\Entity\File;
 use Drupal\image\Entity\ImageStyle;
 use Drupal\oe_bootstrap_theme\ValueObject\ImageValueObject;
-use Drupal\Tests\oe_bootstrap_theme\Kernel\AbstractKernelTestBase;
 
 /**
  * Test image value object with image field type. Extracted from oe_theme.