Merge branch 'develop'

README.md

@@ -169,6 +169,7 @@ SilverWare ships with the following components ready for use:
 - [`TagCloudComponent`](#tagcloudcomponent)
 - [`TileComponent`](#tilecomponent)
 - [`TitleComponent`](#titlecomponent)
+- [`ToggleComponent`](#togglecomponent)
 
 ### AreaComponent
 
@@ -269,6 +270,12 @@ If you need to hide the page title in the template (so that two titles are not s
 select the "Hide title of page" option in your `PageComponent`. This adds the class
 `page-title-hidden` which can be used in your site styles.
 
+### ToggleComponent
+
+Allows you to embed a block of rich-text content, edited using `HTMLEditorField`, with
+the visibility of the content toggleable via clicking on the header of the component.
+Can be started open or closed.
+
 ## Issues
 
 Please use the [GitHub issue tracker][issues] for bug reports and feature requests.

_config/styles.yml

@@ -32,6 +32,17 @@ SilverWare\Grid\Frameworks\Bootstrap\Framework:
       white: bg-white
       light: bg-light
       dark: bg-dark
+    border:
+      border: border
+      primary: border-primary
+      secondary: border-secondary
+      success: border-success
+      info: border-info
+      warning: border-warning
+      danger: border-danger
+      white: border-white
+      light: border-light
+      dark: border-dark
     button:
       button: btn
       primary: btn-primary

_config/theme.yml

@@ -26,3 +26,13 @@ SilverWare\Extensions\Style\ThemeStyle:
       text.white: White
       text.light: Light
       text.dark: Dark
+    ColorBorder:
+      border.primary: Primary
+      border.secondary: Secondary
+      border.success: Success
+      border.info: Info
+      border.warning: Warning
+      border.danger: Danger
+      border.white: White
+      border.light: Light
+      border.dark: Dark

client/src/bundles/bundle.js

@@ -18,3 +18,4 @@ require('forms/ToggleGroup.js');
 
 require('components/ScrollToTopButton.js');
 require('components/TagCloudComponent.js');
+require('components/ToggleComponent.js');

client/src/components/ToggleComponent.js

@@ -0,0 +1,35 @@
+/* Toggle Component
+===================================================================================================================== */
+
+import $ from 'jquery';
+
+$(function() {
+
+  // Handle Toggle Components:
+
+  $('.togglecomponent').each(function() {
+
+    var $self   = $(this);
+    var $header = $self.find('header');
+
+    // Detect Start Open Status:
+
+    if ($self.data('start-open')) {
+      $header.addClass('opened');
+    }
+
+    // Handle Header Click:
+
+    $header.on('click', function() {
+      $(this).toggleClass('opened');
+    });
+
+    // Handle Header Link Click:
+
+    $header.find('a').on('click', function(e) {
+      e.stopPropagation();
+    });
+
+  });
+
+});

client/src/styles/bundle.scss

@@ -29,6 +29,7 @@
 @import "components/ScrollToTopButton";
 @import "components/TableComponent";
 @import "components/TileComponent";
+@import "components/ToggleComponent";
 
 // Import Extension Styles:
 

client/src/styles/components/ToggleComponent.scss

@@ -0,0 +1,59 @@
+/* Toggle Component Styles
+===================================================================================================================== */
+
+.togglecomponent {
+
+  margin: 0 0 $spacer;
+  border: $border-width solid $border-color;
+
+  > header {
+
+    cursor: pointer;
+    padding: $spacer;
+    transition: $transition-base;
+
+    > * {
+
+      margin: 0;
+      font-size: inherit;
+
+      &:before {
+        opacity: 0.75;
+        content: "\f0fe";
+        display: inline-block;
+        padding-right: $spacer-half;
+        font-family: 'FontAwesome';
+      }
+
+    }
+
+    &.opened {
+
+      > *:before {
+        content: "\f146";
+      }
+
+    }
+
+    &.opened + div.content {
+      display: block;
+    }
+
+    @include hover-focus {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+
+  }
+
+  > div.content {
+
+    display: none;
+    padding: $spacer;
+
+    border-top-width: $border-width;
+    border-top-style: dotted;
+    border-top-color: inherit;
+
+  }
+
+}

package.json

@@ -26,29 +26,33 @@
     "url": "https://github.com/praxisnetau/silverware/issues"
   },
   "engines": {
-    "node": "^6.x"
+    "node": "^8.x"
   },
   "scripts": {
     "watch": "webpack --env.development --colors --watch",
-    "build": "webpack --env.production --colors --optimize-minimize"
+    "build": "webpack --env.production --colors --progress --optimize-minimize"
   },
   "dependencies": {},
   "devDependencies": {
-    "autoprefixer": "^7.1.5",
+    "autoprefixer": "^7.2.4",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.0",
+    "babel-preset-env": "^1.6.1",
     "clean-webpack-plugin": "^0.1.17",
-    "copy-webpack-plugin": "^4.1.1",
-    "css-loader": "^0.28.7",
-    "extract-text-webpack-plugin": "^3.0.1",
-    "file-loader": "^1.1.5",
-    "node-sass": "^4.5.3",
-    "postcss-loader": "^2.0.6",
+    "copy-webpack-plugin": "^4.3.1",
+    "css-loader": "^0.28.8",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "file-loader": "^1.1.6",
+    "node-sass": "^4.7.2",
+    "postcss-loader": "^2.0.10",
+    "resolve-url-loader": "^2.2.1",
     "sass-loader": "^6.0.6",
-    "style-loader": "^0.19.0",
+    "style-loader": "^0.19.1",
+    "svgo": "^1.0.3",
+    "svgo-loader": "^2.1.0",
+    "uglifyjs-webpack-plugin": "^1.1.6",
     "url-loader": "^0.6.2",
-    "webpack": "^3.6.0"
+    "webpack": "^3.10.0"
   },
   "babel": {
     "presets": [

postcss.config.js

@@ -1,3 +1,6 @@
+/* PostCSS Configuration
+===================================================================================================================== */
+
 module.exports = {
   plugins: [
     require('autoprefixer')

src/Components/ContentComponent.php

@@ -20,6 +20,8 @@
 use SilverStripe\Forms\HTMLEditor\HTMLEditorField;
 use SilverWare\Extensions\Model\LinkToExtension;
 use SilverWare\Extensions\Style\AlignmentStyle;
+use SilverWare\Extensions\Style\CornerStyle;
+use SilverWare\Extensions\Style\ThemeStyle;
 use SilverWare\FontIcons\Extensions\FontIconExtension;
 
 /**
@@ -97,8 +99,10 @@ class ContentComponent extends BaseComponent
      */
     private static $extensions = [
         AlignmentStyle::class,
+        CornerStyle::class,
         FontIconExtension::class,
-        LinkToExtension::class
+        LinkToExtension::class,
+        ThemeStyle::class
     ];
 
     /**

src/Components/ToggleComponent.php

@@ -0,0 +1,126 @@
+<?php
+
+/**
+ * This file is part of SilverWare.
+ *
+ * PHP version >=5.6.0
+ *
+ * For full copyright and license information, please view the
+ * LICENSE.md file that was distributed with this source code.
+ *
+ * @package SilverWare\Components
+ * @author Colin Tucker <colin@praxis.net.au>
+ * @copyright 2018 Praxis Interactive
+ * @license https://opensource.org/licenses/BSD-3-Clause BSD-3-Clause
+ * @link https://github.com/praxisnetau/silverware
+ */
+
+namespace SilverWare\Components;
+
+use SilverStripe\Forms\CheckboxField;
+use SilverWare\Forms\FieldSection;
+
+/**
+ * An extension of the content component class for a toggle component.
+ *
+ * @package SilverWare\Components
+ * @author Colin Tucker <colin@praxis.net.au>
+ * @copyright 2018 Praxis Interactive
+ * @license https://opensource.org/licenses/BSD-3-Clause BSD-3-Clause
+ * @link https://github.com/praxisnetau/silverware
+ */
+class ToggleComponent extends ContentComponent
+{
+    /**
+     * Human-readable singular name.
+     *
+     * @var string
+     * @config
+     */
+    private static $singular_name = 'Toggle Component';
+
+    /**
+     * Human-readable plural name.
+     *
+     * @var string
+     * @config
+     */
+    private static $plural_name = 'Toggle Components';
+
+    /**
+     * Description of this object.
+     *
+     * @var string
+     * @config
+     */
+    private static $description = 'A component to show a toggleable block of content';
+
+    /**
+     * Icon file for this object.
+     *
+     * @var string
+     * @config
+     */
+    private static $icon = 'silverware/silverware: admin/client/dist/images/icons/ToggleComponent.png';
+
+    /**
+     * Defines the table name to use for this object.
+     *
+     * @var string
+     * @config
+     */
+    private static $table_name = 'SilverWare_ToggleComponent';
+
+    /**
+     * Maps field names to field types for this object.
+     *
+     * @var array
+     * @config
+     */
+    private static $db = [
+        'StartOpen' => 'Boolean'
+    ];
+
+    /**
+     * Defines the default values for the fields of this object.
+     *
+     * @var array
+     * @config
+     */
+    private static $defaults = [
+        'StartOpen' => 0
+    ];
+
+    /**
+     * Answers an array of HTML tag attributes for the object.
+     *
+     * @return array
+     */
+    public function getAttributes()
+    {
+        $attributes = array_merge(
+            parent::getAttributes(),
+            [
+                'data-start-open' => $this->dbObject('StartOpen')->NiceAsBoolean()
+            ]
+        );
+
+        return $attributes;
+    }
+
+    /**
+     * Event method called before the receiver is written to the database.
+     *
+     * @return void
+     */
+    public function onBeforeWrite()
+    {
+        // Call Parent Event:
+
+        parent::onBeforeWrite();
+
+        // Enforce Visible Title:
+
+        $this->HideTitle = 0;
+    }
+}