[518] Added Table widget

website/app.js

@@ -102,6 +102,7 @@ function createAposConfig() {
       'categories': {},
       'case-studies-carousel-widget': {},
       'container-widget': {},
+      'table-widget': {},
     },
   };
 }

website/lib/mainWidgets.js

@@ -19,6 +19,7 @@ module.exports = {
         '@apostrophecms/rich-text': {
           ...headingToolbar,
         },
+        'table': {},
       },
       columns: 2,
     },

website/modules/asset/ui/src/index.scss

@@ -20,3 +20,4 @@
 @import './scss/_page-intro';
 @import './scss/_cases.scss';
 @import './scss/_container.scss';
+@import './scss/_table-widget';

website/modules/asset/ui/src/scss/_table-widget.scss

@@ -0,0 +1,112 @@
+.sf-table-intro {
+  margin-bottom: 40px;
+  max-width: 800px;
+
+  h2 {
+    margin-bottom: 20px;
+  }
+
+  p {
+    color: $gray-300;
+  }
+}
+
+.sf-table {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  @include breakpoint-medium {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+}
+
+.sf-table-row {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: 1px solid $gray-200;
+  padding: 24px;
+
+  &:not(:last-child) {
+    border-bottom: none;
+  }
+  @include breakpoint-medium {
+    width: calc(33.3% - 24px);
+    padding: 40px;
+    margin: 0 -1px 0 0;
+    border: 1px solid $gray-200;
+
+    &:not(:last-child) {
+      border: 1px solid $gray-200;
+    }
+    &:nth-child(3n+6) {
+      border-top: none;
+    }
+    &:nth-child(4n) {
+      border-top: none;
+    }
+    &:nth-child(n+4) {
+      border-top: none;
+    }
+
+  }
+}
+
+.sf-table-cell-title {
+  font-weight: 700;
+  font-size: 14px;
+  color: $gray-500;
+
+  @include breakpoint-medium {
+    font-size: 22px;
+  }
+}
+
+.sf-table-title {
+  font-weight: 700;
+  font-size: 18px;
+  color: $gray-500;
+  margin: 0;
+
+  @include breakpoint-medium {
+    font-size: 22px;
+  }
+}
+
+.sf-table-cell-description {
+  border-bottom: none;
+  font-weight: 500;
+  font-size: 14px;
+  color: $gray-300;
+
+  p {
+    margin: 24px 0 0;
+  }
+  @include breakpoint-medium {
+    p {
+      margin: 32px 0 0;
+      min-height: 80px;
+    }
+  }
+}
+
+
+.sf-table-link {
+  margin-top:24px;
+
+  a {
+    color: $gray-300;
+    text-decoration: underline;
+    font-weight: 300;
+    font-size: 11px;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+  @include breakpoint-medium {
+    margin-top: 32px;
+  }
+} 

website/modules/table-widget/index.js

@@ -0,0 +1,56 @@
+const extendedToolbar = require('../../lib/extendedToolbar');
+const headingToolbar = require('../../lib/headingToolbar');
+const linkSchema = require('../../lib/linkSchema');
+
+module.exports = {
+  extend: '@apostrophecms/widget-type',
+  options: {
+    label: 'Table Widget',
+    icon: 'table-icon',
+  },
+  fields: {
+    add: {
+      intro: {
+        label: 'Intro',
+        type: 'area',
+        options: {
+          max: 1,
+          widgets: {
+            '@apostrophecms/rich-text': {
+              ...headingToolbar,
+            },
+          },
+        },
+        required: false,
+      },
+      rows: {
+        label: 'Table Rows',
+        type: 'array',
+        titleField: 'title',
+        min: 1,
+        fields: {
+          add: {
+            title: {
+              label: 'Title',
+              type: 'string',
+              required: true,
+            },
+            description: {
+              label: 'Description',
+              type: 'area',
+              options: {
+                widgets: {
+                  '@apostrophecms/rich-text': {
+                    ...extendedToolbar,
+                  },
+                },
+              },
+              required: true,
+            },
+            ...linkSchema.fields.add,
+          },
+        },
+      },
+    },
+  },
+};

website/modules/table-widget/views/widget.html

@@ -0,0 +1,38 @@
+<section class="sf-section" data-table-widget>
+  {% if data.widget.intro %}
+    <div class="sf-table-intro">
+      {% area data.widget, 'intro' %}
+    </div>
+  {% endif %}
+
+  <div class="sf-table">
+    {% for row in data.widget.rows %}
+      <div class="sf-table-row">
+        <div class="sf-table-cell sf-table-cell-title">
+          <h3 class="sf-table-title">{{ row.title }}</h3>
+        </div>
+
+        <div class="sf-table-cell sf-table-cell-description">
+          {% area row, 'description' %}
+
+          {% if row.linkTitle %}
+            <div class="sf-table-link">
+              {% set linkUrl = '' %}
+              {% if row.linkType == 'page' and row._page[0] %}
+                {% set linkUrl = row._page[0]._url %}
+              {% elif row.linkType == 'file' and row._file[0] %}
+                {% set linkUrl = row._file[0]._url %}
+              {% elif row.linkType == 'custom' and row.customUrl %}
+                {% set linkUrl = row.customUrl %}
+              {% endif %}
+
+              {% if linkUrl %}
+                <a href="{{ linkUrl }}" class="sf-link" {% if '_blank' in (row.target or []) %}target="_blank" rel="noopener noreferrer"{% endif %}>{{ row.linkTitle }}</a>
+              {% endif %}
+            </div>
+          {% endif %}
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+</section>