feat: board bios

.sass-lint.yml

@@ -135,7 +135,7 @@ rules:
   # https://github.com/sasstools/sass-lint/blob/master/docs/rules/nesting-depth.md
   nesting-depth:
     - 2
-    - max-depth: 3
+    - max-depth: 4
 
   # TODO: no-attribute-selectors
   # Rule no-attribute-selectors will warn against the use of attribute selectors.

package.json

@@ -59,24 +59,24 @@
     "build:netlify": "npm run build:all --build=netlify"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@babel/preset-env": "^7.12.7",
-    "@babel/standalone": "^7.12.9",
+    "@babel/core": "^7.13.10",
+    "@babel/preset-env": "^7.13.10",
+    "@babel/standalone": "^7.13.11",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/git": "^9.0.0",
-    "@zeplin/cli": "^1.0.4",
-    "autoprefixer": "^10.0.4",
+    "@zeplin/cli": "^1.1.6",
+    "autoprefixer": "^10.2.5",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
-    "browser-sync": "^2.26.13",
+    "browser-sync": "^2.26.14",
     "del": "^6.0.0",
-    "dompurify": "^2.2.2",
-    "eslint": "^7.14.0",
+    "dompurify": "^2.2.7",
+    "eslint": "^7.22.0",
     "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-html": "^6.1.1",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-html": "^6.1.2",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-prettier": "^3.2.0",
+    "eslint-plugin-prettier": "^3.3.1",
     "glob": "^7.1.6",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^7.0.1",
@@ -88,7 +88,7 @@
     "gulp-eslint": "^6.0.0",
     "gulp-flatten": "^0.4.0",
     "gulp-format-html": "^1.2.5",
-    "gulp-htmlhint": "^3.0.1",
+    "gulp-htmlhint": "^4.0.0",
     "gulp-htmlmin": "^5.0.1",
     "gulp-imagemin": "^7.1.0",
     "gulp-load-plugins": "^2.0.6",
@@ -104,18 +104,18 @@
     "gulp-svgmin": "^3.0.0",
     "gulp-svgstore": "^7.0.1",
     "gulp-uglify-es": "^2.0.0",
-    "marked": "^1.2.5",
+    "marked": "^2.0.1",
     "node-sass": "^5.0.0",
-    "npm-check-updates": "^10.2.2",
-    "nunjucks": "^3.2.2",
+    "npm-check-updates": "^11.3.0",
+    "nunjucks": "^3.2.3",
     "nunjucks-markdown": "^2.0.1",
     "prettier": "^2.2.1",
-    "sass": "^1.29.0",
-    "semantic-release": "^17.3.0",
-    "webpack-stream": "^6.1.1"
+    "sass": "^1.32.8",
+    "semantic-release": "^17.4.2",
+    "webpack-stream": "^6.1.2"
   },
   "dependencies": {
-    "iframe-resizer": "^4.2.11",
+    "iframe-resizer": "^4.3.1",
     "path": "^0.12.7"
   }
 }

src/wmcads/assets/sass/wmcads-grid/_wmcads-grid.scss

@@ -14,7 +14,6 @@ textarea,
 .wmcads-grid {
   display: flex;
   width: 100%;
-  letter-spacing: -0.31em;
   text-rendering: optimizespeed;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;

src/wmcads/components/_components.scss

@@ -13,6 +13,7 @@
 @import "inset-text/inset-text"; // Inset text
 @import "in-text-step/in-text-step"; // In-text step
 @import "link/link"; // Link elements
+@import "lists/bare-list/bare-list"; // Bare list elements
 @import "lists/ordered-list/ordered-list"; // Ordered list elements
 @import "lists/unordered-list/unordered-list"; // Unordered list elements
 @import "loader/loader"; // Loader

src/wmcads/components/link/link/_link.njk

@@ -3,6 +3,8 @@
 {% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
 {# Set vars #}
 {% set text = params.text if params.text else "link text" %} {# set link text #}
+{% set copy = params.copy if params.copy else "<p>Reveal some hidden content</p>" %} {# set link copy #}
+{% set copyName = params.copyName if params.copyName else "example" %} {# set link copy id #}
 {% set link = params.link if params.link else "#" %} {# set link url #}
 {% set linkTitle = params.linkTitle if params.linkTitle else "link title" %} {# set link title #}
 {% set linkTarget = params.linkTarget if params.linkTarget else "_self" %} {# set link target #}
@@ -12,11 +14,18 @@
 {% set class = ' ' + params.classModifiers if params.classModifiers %}
 {% set class = class + " wmcads-link--with-chevron" if params.withChevronLeft or params.withChevronRight else class %}
 
-<a href="{{ link }}" title="{{ linkTitle }}" target="{{ linkTarget }}" class="wmcads-link{{class}}" {% if linkRel %}rel="{{linkRel}}"{% endif %}>
+<div class="collapse {{params.copyName}}">
+  {{copy | safe}}
+</div>
+
+<a href="{{ link }}" title="{{ linkTitle }}" target="{{ linkTarget }}" class="wmcads-link{{class}} {% if params.withReadMore %}hvr-icon-hang{% endif %}" {% if linkRel %}rel="{{linkRel}}"{% endif %} {% if params.withReadMore %}data-toggle="collapse" data-target=".collapse.{{params.copyName}}" data-text="collapse" aria-expanded="false" data-html-text="View more" {% endif %}>
   {% if params.withChevronLeft -%}
   {{ wmcadsIcon({ icon: "general-chevron-right", class: "wmcads-link__chevron wmcads-link__chevron--left" }) | indent(4) | trim }}
   {%- endif %}
-  {{- prefix -}}{{- text -}}
+  {% if params.withReadMore -%}
+  {{ wmcadsIcon({ icon: "general-chevron-right", class: "wmcads-link__chevron wmcads-link__chevron--down hvr-icon" }) | indent(4) | trim }}
+  {%- endif %}
+  {{- prefix -}}{% if not params.withReadMore %}{{- text -}}{% endif %}
   {% if params.withChevronRight -%}
   {{ wmcadsIcon({ icon: "general-chevron-right", class: "wmcads-link__chevron wmcads-link__chevron--right" }) | indent(4) | trim }}
   {%- endif %}

src/wmcads/components/link/link/_link.scss

@@ -30,14 +30,14 @@
 
     // prevent icon resizing
     .wmcads-link__chevron {
-      flex: 0 0 1.5rem;
+      flex: 0 0 1rem;
     }
   }
 
   &__chevron {
     width: 1.5rem;
-    height: 1.5rem;
-    fill: get-color(cta, 10, dark);
+    height: 1rem;
+    fill: get-color(primary);
 
     &--left {
       margin-right: $size-xsm;
@@ -47,6 +47,11 @@
     &--right {
       margin-left: $size-xsm;
     }
+
+    &--down {
+      margin-left: $size-xsm;
+      transform: rotate(90deg);
+    }
   }
 }
 
@@ -57,3 +62,51 @@ a {
     color: get-color(cta);
   }
 }
+
+
+// red more icon
+.hvr-icon-hang {
+  display: inline-block;
+  transform: perspective(1px) translateZ(0);
+  border: 0;
+  color: get-color(secondary);
+  background: none;
+  vertical-align: middle;
+
+  .hvr-icon {
+    color: get-color(primary);
+  }
+
+}
+
+.hvr-icon-hang[aria-expanded="false"] {
+  &:after {
+    content: attr(data-html-text);
+    color: get-color(cta);
+  }
+
+  &:hover::after {
+    color: get-color(cta-active, 40, dark);
+  }
+}
+
+.hvr-icon-hang[aria-expanded="true"] {
+
+  .hvr-icon {
+    transform: rotate(270deg);
+  }
+
+  &:after {
+    content: "View less";
+  }
+}
+
+.collapse {
+  display: block;
+  max-height: 0;
+  overflow: hidden;
+
+  &.show {
+    max-height: 99em;
+  }
+}

src/wmcads/components/lists/bare-list/_bare-list.njk

@@ -0,0 +1,7 @@
+{% macro wmcadsBareList(params) %}
+
+<ul class="wmcads-bare-list">
+    {{ params.html | safe}}
+</ul>
+
+{% endmacro %}

src/wmcads/components/lists/bare-list/_bare-list.scss

@@ -0,0 +1,10 @@
+.wmcads-bare-list {
+  list-style: none;
+  padding-inline-start: $size-xs;
+
+  a,
+  .wmcads-link {
+    display: inline;
+  }
+
+}

src/wmcads/patterns/_patterns.scss

@@ -2,6 +2,7 @@
 
 @import "autocomplete/autocomplete"; // Autocomplete
 @import "banner/banner"; // Header styles
+@import "board-members/board-members"; // Board members
 @import "cookies/cookies"; // Cookies styles
 @import "feedback-loop/feedback-loop"; // Feedback loop
 @import "footer/footer"; // Footer styles