Update test suite for twig 3 compatibility

jadu · Apr 2, 2024 · 853ab4b · 853ab4b
1 parent 7a024e8
commit 853ab4b
Show file tree

Hide file tree

Showing 9 changed files with 218 additions and 14 deletions.
diff --git a/app/test.php b/app/test.php
@@ -15,7 +15,7 @@
 $loader = new Twig_Loader_Filesystem($templateDir);
 $loader->addPath($baseDir . 'views', 'pulsar');
 
-$twig = new Twig_Environment($loader,
+$twig = new \Twig\Environment($loader,
 	array(
 		'debug' => true,
 		'strict_variables' => true

diff --git a/docs/docs/components/accordion.mdx b/docs/docs/components/accordion.mdx
@@ -0,0 +1,108 @@
+---
+id: accordion
+title: Accordion
+sidebar_label: Accordion
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+Show and hide sections of content.
+
+<div className="d-example">
+    <div id="accordionGroup" className="accordion">
+        <div className="accordion__panel">
+            <button type="button" aria-expanded="true" className="accordion__trigger" aria-controls="sect1" id="accordion1id" title="expand"></button>
+            <h2 className="accordion__title" id="accordion1title">Section One</h2>
+            <div id="sect1" role="region" aria-labelledby="accordion1title" className="accordion__content">
+                Content One
+            </div>
+        </div>
+        <div className="accordion__panel">
+            <button type="button" className="accordion__trigger" aria-controls="sect2" id="accordion2id"></button>
+            <h2 className="accordion__title" id="accordion2title">Section Two</h2>
+            <div id="sect2" role="region" aria-labelledby="accordion2title" className="accordion__content">
+                Content Two
+            </div>
+        </div>
+        <div className="accordion__panel">
+            <button type="button" className="accordion__trigger" aria-controls="sect3" id="accordion3id"></button>
+            <h2 className="accordion__title" id="accordion3title">Section Three</h2>
+            <div id="sect3" role="region" aria-labelledby="accordion3title" className="accordion__content">
+                Content Three
+            </div>
+        </div>
+    </div>
+</div>
+
+## Basic usage
+
+<Tabs
+  groupID="example"
+  defaultValue="html"
+  values={[
+    { label: 'HTML', value: 'html', },
+  ]
+}>
+<TabItem value="html">
+
+```html
+<div id="accordionGroup" className="accordion">
+    <div className="accordion__panel">
+        <button type="button" aria-expanded="true" className="accordion__trigger" aria-controls="sect1" id="accordion1id" title="expand"></button>
+        <h2 className="accordion__title" id="accordion1title">Section One</h2>
+        <div id="sect1" role="region" aria-labelledby="accordion1title" className="accordion__content">
+            Content One
+        </div>
+    </div>
+    <div className="accordion__panel">
+        <button type="button" className="accordion__trigger" aria-controls="sect2" id="accordion2id"></button>
+        <h2 className="accordion__title" id="accordion2title">Section Two</h2>
+        <div id="sect2" role="region" aria-labelledby="accordion2title" className="accordion__content">
+            Content Two
+        </div>
+    </div>
+    <div className="accordion__panel">
+        <button type="button" className="accordion__trigger" aria-controls="sect3" id="accordion3id"></button>
+        <h2 className="accordion__title" id="accordion3title">Section Three</h2>
+        <div id="sect3" role="region" aria-labelledby="accordion3title" className="accordion__content">
+            Content Three
+        </div>
+    </div>
+</div>
+```
+
+</TabItem>
+</Tabs>
+
+## Style variations
+
+### Bordered
+
+`.accordion--bordered`
+
+<div className="d-example">
+  <div id="accordionGroup" className="accordion accordion--bordered">
+      <div className="accordion__panel">
+          <button type="button" aria-expanded="true" className="accordion__trigger" aria-controls="sect4" id="accordion4id" title="expand"></button>
+          <h2 className="accordion__title" id="accordion1title">Section One</h2>
+          <div id="sect4" role="region" aria-labelledby="accordion4title" className="accordion__content">
+              <p>Content One</p>
+          </div>
+      </div>
+      <div className="accordion__panel">
+          <button type="button" className="accordion__trigger" aria-controls="sect5" id="accordion5id"></button>
+          <h2 className="accordion__title" id="accordion5title">Section Two</h2>
+          <div id="sect5" role="region" aria-labelledby="accordion5title" className="accordion__content">
+              <p>Content Two</p>
+          </div>
+      </div>
+      <div className="accordion__panel">
+          <button type="button" className="accordion__trigger" aria-controls="sect6" id="accordion6id"></button>
+          <h2 className="accordion__title" id="accordion6title">Section Three</h2>
+          <div id="sect6" role="region" aria-labelledby="accordion6title" className="accordion__content">
+              <p>Content Three</p>
+          </div>
+      </div>
+  </div>
+</div>
diff --git a/docs/src/css/custom-dark.scss b/docs/src/css/custom-dark.scss
@@ -0,0 +1,58 @@
+/* stylelint-disable docusaurus/copyright-header */
+/**
+* Any CSS included here will be global. The classic template
+* bundles Infima by default. Infima is a CSS framework designed to
+* work well for content-centric websites.
+*/
+
+$theme: 'dark' !default;
+
+.d-example,
+.d-example-inline,
+.d-guidelines {
+    @import '../../../stylesheets/mixin.media-queries';
+    @import '../../../stylesheets/mixin.mixins-to-organise';
+
+    // Functions
+    @import '../../../stylesheets/function.math';
+    @import '../../../stylesheets/function.color-luminance';
+    @import '../../../stylesheets/function.pick-best-color';
+    @import '../../../stylesheets/function.color';
+
+    // Config
+    @import '../../../stylesheets/config.variables';
+    @import '../../../stylesheets/config.branding';
+
+    // Functions
+    @import '../../../stylesheets/function.math';
+    @import '../../../stylesheets/function.color-luminance';
+    @import '../../../stylesheets/function.pick-best-color';
+    @import '../../../stylesheets/function.color';
+
+    // Base colour palette
+    @import '../../../stylesheets/palette.base';
+    @import '../../../stylesheets/palette.dark';
+    @import '../../../stylesheets/palette.maps';
+    @import '../../../stylesheets/config.theme';
+
+    .bg--dark {
+        background-color: color(background);
+
+        code {
+            background-color: color(background, light);
+            border-color: rgba(255, 255, 255, .2);
+            color: color(text);
+        }
+    }
+
+    .swatch {
+        @each $name, $palette in $colors {
+            @each $variant, $value in $palette {
+                &--#{'' + $name}-#{$variant} .swatch__chip--dark {
+                    background-color: color($name, $variant);
+                    color: pick_best_color(color($name, $variant), (#fff, #000));
+                }
+            }
+        }
+    }
+}
diff --git a/docs/src/js/index.js b/docs/src/js/index.js
@@ -0,0 +1,18 @@
+// /**
+//  * Pulsar
+//  *
+//  * Core UI components that should always be present.
+//  *
+//  * Jadu Ltd.
+//  */
+
+// // Fixes issue with dependencies that expect both $ and jQuery to be set
+// window.jQuery = window.$ = require('jquery');
+
+// // Global UI components
+// var $                  = require('jquery'),
+//     AccordionComponent = require('..//AccordionComponent');
+
+// module.exports = {
+//     AccordionComponent
+// };
diff --git a/docs/src/js/main.js b/docs/src/js/main.js
@@ -0,0 +1,20 @@
+(function ($) {
+
+    // Protect IE8 from any erroneous console.log uses which would break everything
+    if (!window.console) {
+        console = { log: function() {} }
+    };
+
+    var $html = $('html'),
+        lt10 = $html.hasClass('lt-ie10');
+
+    $html.removeClass('no-js');
+
+    pulsar.accordion = new pulsar.AccordionComponent($html);
+
+    $(function () {
+        console.log(pulsar);
+        pulsar.accordion.init();
+    });
+
+}(jQuery));
diff --git a/tests/unit/Jadu/Pulsar/Twig/Extension/ArrayExtensionTest.php b/tests/unit/Jadu/Pulsar/Twig/Extension/ArrayExtensionTest.php
@@ -12,8 +12,8 @@ class ArrayExtensionTest extends \PHPUnit\Framework\TestCase
 	public function setUp(): void
 	{
 		parent::setUp();
-		$this->loader = new \Twig_Loader_Filesystem();
-		$this->env = new \Twig_Environment($this->loader);
+		$this->loader = new \Twig\Loader\FilesystemLoader();
+		$this->env = new \Twig\Environment($this->loader);
 		$this->ext = new ArrayExtension(array());
 		$this->data = array('slim' => 'shady', 'marshall' => 'mathers', 'eminem' => true, 'class' => 'wrapper');
 	}

diff --git a/tests/unit/Jadu/Pulsar/Twig/Extension/ConstantDefinedExtensionTest.php b/tests/unit/Jadu/Pulsar/Twig/Extension/ConstantDefinedExtensionTest.php
@@ -2,8 +2,8 @@
 
 namespace Jadu\Pulsar\Twig\Extension;
 
-use Twig_Environment;
-use Twig_Loader_Array;
+use \Twig\Environment;
+use Twig\Loader\ArrayLoader;
 
 class ConstantDefinedExtensionTest extends \PHPUnit\Framework\TestCase
 {
@@ -21,11 +21,11 @@ public function testGetName()
 
     public function testConstantDefinedFunction()
     {
-        $loader = new Twig_Loader_Array(array(
+        $loader = new \Twig\Loader\ArrayLoader(array(
             'index.html' => '{% if constant_defined("FOO") %}true{% endif %}',
         ));
 
-        $twig = new Twig_Environment($loader);
+        $twig = new \Twig\Environment($loader);
         $twig->addExtension(new ConstantDefinedExtension());
 
         define('FOO', true);

diff --git a/tests/unit/Jadu/Pulsar/Twig/Extension/GetConstantExtensionTest.php b/tests/unit/Jadu/Pulsar/Twig/Extension/GetConstantExtensionTest.php
@@ -2,8 +2,8 @@
 
 namespace Jadu\Pulsar\Twig\Extension;
 
-use Twig_Environment;
-use Twig_Loader_Array;
+use \Twig\Environment;
+use \Twig\Loader\ArrayLoader;
 
 class GetConstantExtensionTest extends \PHPUnit\Framework\TestCase
 {
@@ -27,11 +27,11 @@ public function testGetName()
 
     public function testGetConstantFunction()
     {
-        $loader = new Twig_Loader_Array(array(
+        $loader = new \Twig\Loader\ArrayLoader(array(
             'index.html' => '{{ get_constant("STRING") }}',
         ));
 
-        $twig = new Twig_Environment($loader);
+        $twig = new \Twig\Environment($loader);
         $twig->addExtension(new GetConstantExtension());
 
         $this->assertEquals('foo', $twig->render('index.html'));

diff --git a/tests/unit/Jadu/Pulsar/Twig/Macro/MacroTest.php b/tests/unit/Jadu/Pulsar/Twig/Macro/MacroTest.php
@@ -10,7 +10,7 @@
 use Jadu\Pulsar\Twig\Extension\RelativeTimeExtension;
 use Jadu\Pulsar\Twig\Extension\UrlParamsExtension;
 use Jadu\Pulsar\Twig\Extension\TabsExtension;
-use Twig_Environment;
+use \Twig\Environment;
 use Twig_Loader_Filesystem;
 use RecursiveDirectoryIterator;
 use RecursiveIteratorIterator;
@@ -26,12 +26,12 @@ public function setUp(): void
         parent::setUp();
         $baseDir = __DIR__ . '/../../../../../../';
 
-        $loader = new Twig_Loader_Filesystem($this->getFixturesPath());
+        $loader = new \Twig\Loader\FilesystemLoader($this->getFixturesPath());
         $loader->addPath($baseDir . 'views', 'pulsar');
         $loader->addPath($baseDir . 'tests/unit/Jadu/Pulsar/Twig/Macro/Fixtures', 'tests');
         $loader->addPath($baseDir . 'tests/css', 'cssTests');
 
-        $this->twig = new Twig_Environment($loader, array(
+        $this->twig = new \Twig\Environment($loader, array(
             'cache' => false,
             'strict_variables' => true,
         ));