swedbank-pay-design-guide-jekyll-theme 2.8.2 → 2.8.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bef43c1bda12a011153336c8c23e3b82fbd5a8cc9525f1e8973e475052cee712
-  data.tar.gz: 374ea1214fde77125e260129aa954d13a052b8bdc64d99cc35620e2fad253578
+  metadata.gz: 73c12f72d4d055a93ee0a31230c3d2d6a15ac118d716ed65c80655be4ad0a594
+  data.tar.gz: da99ecee1b960f6afde03e07a00c43794867693404e86a8394c30acb92cfd765
 SHA512:
-  metadata.gz: 9dedc80e83d9446d65f7352774bbeffbbfd7dc57ae5ef30a6c5d87ffcd84752cbe66307ede6a8264d7d5e9bf6ef2c8000489a4a0127aa2c6d2dcc136fd79fbff
-  data.tar.gz: 8d545455cf8025a821628c6d91553bb44733bcc9bf627f4ed71abc2f578d306c213b16bd091fd00e7a14ef84e20d74493ecf7a1b34d1fab860b3c66944b385b2
+  metadata.gz: dfe4d4a396b8a700f58a6d16aa4fa4bfcdb22326bee7555b94c25643bf3a32f45ca935f33a9ea54369d6be7b2d7ef7e4182fb50c0d68aa0ed8d321a0e62ecd39
+  data.tar.gz: 4bffd2489e69690385049f07c6061b4cee4d8736269ebc3cc78b73715f36bc5f27cbba1409f0f9c7e55d58d290cc2607a0804185fefa002ea47fdf0862d1bd59

data/_includes/code-example.html

@@ -8,7 +8,7 @@ json: json content
 <p class="code-view-header">
     {{ include.title}}
     {% if include.json %}
-    <button aria-describedby="tooltipCopy" class="code-view-copy tooltip" aria-label="Copy json to clipboard" value='{{include.json}}' onclick='javascript:navigator.clipboard.writeText(this.value)'><i class="at-clipboard small" aria-hidden="true"></i><div role="tooltip">Copy json to clipboard</div></button>
+    {% include copy-button.html content=include.json label="Copy json to clipboard" tooltip="Copy json to clipboard" %}
     {% endif %}
 </p>
 {% if include.header %}

data/_includes/copy-button.html

@@ -0,0 +1,11 @@
+{%- comment -%}
+**Parameters
+content: Content to copy to clipboard
+label: Aria label text (optional, defaults to "Copy to clipboard")
+tooltip: Tooltip text (optional, defaults to "Copy to clipboard")
+{%- endcomment -%}
+
+{%- assign buttonLabel = include.label | default: "Copy to clipboard" -%}
+{%- assign buttonTooltip = include.tooltip | default: "Copy to clipboard" -%}
+
+<button aria-describedby="tooltipCopy" class="code-view-copy tooltip" aria-label="{{ buttonLabel }}" value='{{include.content}}' onclick='javascript:navigator.clipboard.writeText(this.value)'><i class="at-clipboard small" aria-hidden="true"></i><div role="tooltip">{{ buttonTooltip }}</div></button>

data/_layouts/default.html

@@ -115,6 +115,7 @@
         <script src="{{ design_guide_url }}/scripts/dg.js" global="true" autoload="true"></script>
         <script src="{{ '/assets/js/swedbank-pay-design-guide-theme.js' | relative_url }}"></script>
         <script src="{{ '/assets/js/cookie-consent.js' | relative_url }}"></script>
+        <script src="{{ '/assets/js/enable-code-copy-in-table.js' | relative_url }}"></script>
         {%- if site.google_analytics.tracking_id %}
         {% include google_analytics.html %}
         {%- endif %}

data/_sass/code-view.scss

@@ -17,6 +17,12 @@
     text-decoration: none;
 }
 
+.enable-code-copy .code-view-copy {
+    background-color: inherit;
+    color: inherit;
+    display: inline-flex;
+}
+
 .code-view {
     .code-view-table {
         .code-view-code {

data/assets/js/enable-code-copy-in-table.js

@@ -0,0 +1,40 @@
+// Automatically add copy buttons to tables with 'enable-copy' class
+// Adds a copy button next to every <code> element in the table
+document.addEventListener('DOMContentLoaded', function() {
+  // Find all tables with class enable-copy
+  document.querySelectorAll('table.enable-code-copy').forEach(table => {
+    // Find all <code> elements in the table
+    const codeElements = table.querySelectorAll('td code');
+    
+    codeElements.forEach(codeElement => {
+      const value = codeElement.textContent.trim();
+      
+      // Create copy button matching copy-button.html component
+      const button = document.createElement('button');
+      button.setAttribute('aria-describedby', 'tooltipCopy');
+      button.className = 'code-view-copy tooltip';
+      button.setAttribute('aria-label', 'Copy to clipboard');
+      button.value = value;
+      button.onclick = function() { 
+        navigator.clipboard.writeText(this.value);
+      };
+      
+      const icon = document.createElement('i');
+      icon.className = 'at-clipboard small';
+      icon.setAttribute('aria-hidden', 'true');
+      
+      const tooltip = document.createElement('div');
+      tooltip.setAttribute('role', 'tooltip');
+      tooltip.textContent = 'Copy to clipboard';
+      
+      button.appendChild(icon);
+      button.appendChild(tooltip);
+      
+      // Add button after the code element
+      const cell = codeElement.parentElement;
+      cell.style.whiteSpace = 'nowrap';
+      cell.appendChild(document.createTextNode(' '));
+      cell.appendChild(button);
+    });
+  });
+});

data/lib/gem_version.rb

@@ -4,7 +4,7 @@ module Gem
   # Gem Specification
   class Specification
     def self.gem_version
-      '2.8.2'
+      '2.8.3'
     end
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: swedbank-pay-design-guide-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 2.8.2
+  version: 2.8.3
 platform: ruby
 authors:
 - Swedbank Pay
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-12-19 00:00:00.000000000 Z
+date: 2026-02-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: faraday
@@ -402,6 +402,7 @@ files:
 - _includes/card-table.html
 - _includes/card.html
 - _includes/code-example.html
+- _includes/copy-button.html
 - _includes/doc-container.html
 - _includes/example-1.md
 - _includes/example-2.md
@@ -463,6 +464,7 @@ files:
 - assets/img/flag-no.svg
 - assets/img/flag-se.svg
 - assets/js/cookie-consent.js
+- assets/js/enable-code-copy-in-table.js
 - assets/js/mermaid.min.js
 - assets/js/swedbank-pay-design-guide-theme.js
 - assets/puml-theme-swedbankpay.puml