Symfony 3 compatibility

Gruntfile.js

@@ -1,5 +1,5 @@
 // const Fiber = require('fibers');
-const sass = require('dart-sass');
+const sass = require('sass');
 
 module.exports = function(grunt) {
 
@@ -240,6 +240,18 @@ module.exports = function(grunt) {
                     ],
                     dest: 'dist/'
                 }]
+            },
+            symfony: {
+                files: [{
+                    expand: true,
+                    cwd: '',
+                    src: [
+                        'fonts/**/*',
+                        'images/**/*',
+                        'stylesheets/**/*'
+                    ],
+                    dest: 'Resources/public/'
+                }]
             }
         },
 

app/app.php

@@ -15,10 +15,10 @@
 use Jadu\Pulsar\Twig\Extension\UrlParamsExtension;
 use Jadu\Pulsar\Twig\Extension\TabsExtension;
 
-$loader = new Twig_Loader_Filesystem($templateDir);
+$loader = new \Twig\Loader\FilesystemLoader($templateDir);
 $loader->addPath($templateDir, 'pulsar');
 
-$twig = new Twig_Environment($loader,
+$twig = new \Twig\Environment($loader,
 	array(
 		'debug' => true,
 		'strict_variables' => true
@@ -34,14 +34,16 @@
 $twig->addExtension(new RelativeTimeExtension());
 $twig->addExtension(new UrlParamsExtension($_GET));
 $twig->addExtension(new TabsExtension());
-$twig->addExtension(new Twig_Extension_Debug());
+$twig->addExtension(new \Twig\Extension\DebugExtension());
 
 if (strstr($_SERVER['PATH_INFO'], '.html.twig')) {
-    $template = $twig->loadTemplate($_SERVER['PATH_INFO']);
+    $template = $twig->load($_SERVER['PATH_INFO']);
 } else {
-    $template = $twig->loadTemplate($_SERVER['PATH_INFO'] . '/index.html.twig');
+    $template = $twig->load($_SERVER['PATH_INFO'] . '/index.html.twig');
 }
 
-// define('theme', 'projector');
+// Show deprecations
+// $deprecations = new \Twig\Util\DeprecationCollector($twig);
+// print_r($deprecations->collectDir($templateDir));
 
 print $template->render(array());

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

composer.json

@@ -8,7 +8,7 @@
         }
     },
     "require": {
-        "twig/twig": "^2.0"
+        "twig/twig": "^3.0"
     },
     "require-dev": {
         "symfony/yaml": "*"

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>

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));
+                }
+            }
+        }
+    }
+}

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
+// };

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));

js/TimePickerComponent.js

@@ -18,4 +18,4 @@ class TimePickerComponent {
     }
 }
 
-module.exports = TimePickerComponent;
+export default TimePickerComponent;