Support formatting of alert boxes (#18)

* support alerts

* support different types of alerts

* add unit tests

* udpate functionality to separate slide contents in to blocks and add comments

css/alerts.scss

@@ -0,0 +1,112 @@
+$alert-note-color: #0078d7;
+$alert-tip-color: #28a745;
+$alert-important-color: #6f42c1;
+$alert-warning-color: #ffc107;
+$alert-caution-color: #dc3545;
+$alert-color: #3d444d;
+
+.alert {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  border: 0 solid;
+  border-left-width: 6px;
+  margin: 10px 0;
+  --padding-top: 5px;
+  --padding-bottom: 5px;
+  padding: var(--padding-top) 5px var(--padding-bottom) 10px !important;
+  background-color: #fff;
+  font-size: 22px;
+  border-left-color: $alert-color;
+
+  blockquote {
+    width: 100%;
+    margin: 0;
+    padding: 5px 5px 5px 10px;
+    font-style: normal;
+    background: none;
+    box-shadow: none;
+    border-left-color: $alert-color !important;
+
+    p {
+      margin: 0;
+    }
+  }
+
+  &-title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-left: 10px !important;
+  }
+
+  &.note {
+    border-left-color: $alert-note-color;
+
+    .alert-title {
+      color: $alert-note-color;
+      font-weight: bold;
+
+      svg {
+        fill: $alert-note-color;
+        margin-right: 10px;
+      }
+    }
+  }
+
+  &.tip {
+    border-left-color: $alert-tip-color;
+
+    .alert-title {
+      color: $alert-tip-color;
+      font-weight: bold;
+
+      svg {
+        fill: $alert-tip-color;
+        margin-right: 10px;
+      }
+    }
+  }
+
+  &.important {
+    border-left-color: $alert-important-color;
+
+    .alert-title {
+      color: $alert-important-color;
+      font-weight: bold;
+
+      svg {
+        fill: $alert-important-color;
+        margin-right: 10px;
+      }
+    }
+  }
+
+  &.warning {
+    border-left-color: $alert-warning-color;
+
+    .alert-title {
+      color: $alert-warning-color;
+      font-weight: bold;
+
+      svg {
+        fill: $alert-warning-color;
+        margin-right: 10px;
+      }
+    }
+  }
+
+  &.caution {
+    border-left-color: $alert-caution-color;
+
+    .alert-title {
+      color: $alert-caution-color;
+      font-weight: bold;
+
+      svg {
+        fill: $alert-caution-color;
+        margin-right: 10px;
+      }
+    }
+  }
+}

gulpfile.js

@@ -6,6 +6,9 @@ const terser = require('@rollup/plugin-terser')
 const babel = require('@rollup/plugin-babel').default
 const commonjs = require('@rollup/plugin-commonjs')
 const resolve = require('@rollup/plugin-node-resolve').default
+const sourcemaps = require('gulp-sourcemaps')
+const sass = require('gulp-sass')(require('sass'))
+const minify = require('gulp-clean-css')
 
 const cache = {}
 
@@ -70,3 +73,17 @@ gulp.task('build-plugins', () => {
         )
     )
 })
+
+gulp.task('compileToCSS', () => {
+    return gulp
+        .src(['css/**/*.scss', 'css/**/*.sass'])
+        .pipe(sourcemaps.init())
+        .pipe(sass().on('error', sass.logError))
+        .pipe(minify({ compatibility: 'ie9' }))
+        .pipe(sourcemaps.write('.'))
+        .pipe(gulp.dest('./dist/css'))
+})
+
+gulp.task('css', () => gulp.src(['css/**/*.css']).pipe(gulp.dest('./dist/css')))
+
+gulp.task('build', gulp.series('compileToCSS', 'css', 'build-plugins'))

jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-    testEnvironment: 'node',
+    testEnvironment: 'jsdom',
     testMatch: ['**/__tests__/**/*.js', '**/?(*.)+(spec|test).js'],
     moduleFileExtensions: ['js', 'json', 'jsx', 'node'],
     collectCoverage: true,