Merge branch 'develop'

README.md

@@ -165,7 +165,9 @@ SilverWare ships with the following components ready for use:
 - [`MediaComponent`](#mediacomponent)
 - [`PageComponent`](#pagecomponent)
 - [`ScrollToTopButton`](#scrolltotopbutton)
+- [`TableComponent`](#tablecomponent)
 - [`TagCloudComponent`](#tagcloudcomponent)
+- [`TileComponent`](#tilecomponent)
 - [`TitleComponent`](#titlecomponent)
 
 ### AreaComponent
@@ -238,6 +240,12 @@ The button is hidden by default when the user is at the top of the page, and app
 the user begins to scroll down. It can be customised by choosing a font icon,
 and also has fields for defining the show offset, opacity offset and scroll duration.
 
+### TableComponent
+
+Renders a series of child components in a table layout, consisting of rows and columns.
+By default, `TableComponent` makes use of the Bootstrap v4 flexbox layout grid, allowing
+you to define viewport-specific column spans for child components.
+
 ### TagCloudComponent
 
 Shows an interactive tag cloud with tags obtained from an implementor of `TagSource`.
@@ -246,6 +254,13 @@ can be rotated by the user using the mouse or touch gestures. The component has
 configurable text and outline colors, along with zoom, rotation, and font size options.
 Weighted tags are also supported.
 
+### TileComponent
+
+Renders a list of items as a series of "tiles". `TileComponent` is very similar to
+a `ListComponent`, and allows you to specify a `ListSource` for the items to display.
+The tiles are rendered using CSS + flexbox (similar to the Bootstrap grid), adjusting to
+each device accordingly.
+
 ### TitleComponent
 
 Shows the title of the current page. This component is useful when you need to show

_config/styles.yml

@@ -53,6 +53,8 @@ SilverWare\Grid\Frameworks\Bootstrap\Framework:
       outline-dark: btn-outline-dark
       small: btn-sm
       large: btn-lg
+    column:
+      column: column
     content:
       content: content
       typography: typography
@@ -86,6 +88,7 @@ SilverWare\Grid\Frameworks\Bootstrap\Framework:
       left: rounded-left
       circle: rounded-circle
     row:
+      row: row
       no-gutters: no-gutters
     section:
       edge-to-edge: pl-0 pr-0

client/src/styles/bundle.scss

@@ -20,12 +20,14 @@
 // Import Component Styles:
 
 @import "components/BaseListComponent";
+@import "components/ContentComponent";
 @import "components/FeatureComponent";
 @import "components/ImageComponent";
 @import "components/ListComponent";
 @import "components/MediaComponent";
 @import "components/PageComponent";
 @import "components/ScrollToTopButton";
+@import "components/TableComponent";
 @import "components/TileComponent";
 
 // Import Extension Styles:

client/src/styles/components/BaseListComponent.scss

@@ -7,7 +7,7 @@
 
     > article.item {
 
-      margin-bottom: $spacer-double;
+      margin-bottom: $spacer;
 
       &:last-child {
         margin-bottom: 0;
@@ -22,6 +22,7 @@
         }
 
         img {
+          margin: 0;
           display: inline-block;
         }
 

client/src/styles/components/ContentComponent.scss

@@ -0,0 +1,14 @@
+/* Content Component Styles
+===================================================================================================================== */
+
+.contentcomponent {
+
+  > header {
+
+    a {
+      color: inherit;
+    }
+
+  }
+
+}

client/src/styles/components/ListComponent.scss

@@ -35,6 +35,7 @@
         > section.content {
           flex: 1;
           order: 2;
+          margin-top: 0;
           margin-left: $spacer;
         }
 
@@ -50,6 +51,7 @@
         > section.content {
           flex: 1;
           order: 1;
+          margin-top: 0;
           margin-right: $spacer;
         }
 

client/src/styles/components/TableComponent.scss

@@ -0,0 +1,10 @@
+/* Table Component Styles
+===================================================================================================================== */
+
+.tablecomponent {
+
+  .row > .column > .component {
+    margin-bottom: $spacer;
+  }
+
+}

package.json

@@ -26,7 +26,7 @@
     "url": "https://github.com/praxisnetau/silverware/issues"
   },
   "engines": {
-    "node": "^4.2.0"
+    "node": "^6.x"
   },
   "scripts": {
     "watch": "webpack --env.development --colors --watch",

postcss.config.js

@@ -1 +1,5 @@
-module.exports = {};
+module.exports = {
+  plugins: [
+    require('autoprefixer')
+  ]
+};

src/Components/ContentComponent.php

@@ -18,6 +18,9 @@
 namespace SilverWare\Components;
 
 use SilverStripe\Forms\HTMLEditor\HTMLEditorField;
+use SilverWare\Extensions\Model\LinkToExtension;
+use SilverWare\Extensions\Style\AlignmentStyle;
+use SilverWare\FontIcons\Extensions\FontIconExtension;
 
 /**
  * An extension of the base component class for a content component.
@@ -78,6 +81,18 @@ class ContentComponent extends BaseComponent
      */
     private static $allowed_children = 'none';
 
+    /**
+     * Defines the extension classes to apply to this object.
+     *
+     * @var array
+     * @config
+     */
+    private static $extensions = [
+        AlignmentStyle::class,
+        FontIconExtension::class,
+        LinkToExtension::class
+    ];
+
     /**
      * Defines the default classes to use when rendering this object.
      *
@@ -106,7 +121,8 @@ public function getCMSFields()
             HTMLEditorField::create(
                 'Content',
                 $this->fieldLabel('Content')
-            )
+            ),
+            'LinkTo'
         );
 
         // Answer Field Objects:
@@ -123,5 +139,17 @@ public function getContent()
     {
         return $this->dbObject('Content');
     }
-
+
+    /**
+     * Renders the component for the HTML template.
+     *
+     * @param string $layout Page layout passed from template.
+     * @param string $title Page title passed from template.
+     *
+     * @return DBHTMLText|string
+     */
+    public function renderSelf($layout = null, $title = null)
+    {
+        return $this->getController()->renderWith(self::class);
+    }
 }