Merge branch 'faq-page' into dev

package.json

@@ -9,14 +9,14 @@
   "private": true,
   "author": "Biuro",
   "devDependencies": {
-    "@babel/core": "^7.4.5",
+    "@babel/core": "^7.5.4",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-transform-arrow-functions": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.4.4",
-    "@babel/preset-env": "^7.4.5",
+    "@babel/plugin-transform-runtime": "^7.5.0",
+    "@babel/preset-env": "^7.5.4",
     "@babel/register": "^7.4.4",
-    "@babel/runtime": "^7.4.5",
-    "autoprefixer": "^9.6.0",
+    "@babel/runtime": "^7.5.4",
+    "autoprefixer": "^9.6.1",
     "babel-loader": "^8.0.6",
     "browser-sync": "^2.26.7",
     "connect-modrewrite": "^0.10.2",
@@ -27,7 +27,7 @@
     "eslint-config-standard": "^12.0.0",
     "eslint-plugin-import": "^2.18.0",
     "eslint-plugin-node": "^9.1.0",
-    "eslint-plugin-promise": "^4.1.1",
+    "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
     "glob": "^7.1.4",
     "gulp": "^4.0.2",
@@ -47,7 +47,7 @@
     "postcss-extend": "^1.0.5",
     "postcss-import": "^12.0.1",
     "postcss-nested": "^4.1.2",
-    "postcss-preset-env": "^6.6.0",
+    "postcss-preset-env": "^6.7.0",
     "postcss-reporter": "^6.0.1",
     "precss": "^4.0.0",
     "stylelint": "^10.1.0",
@@ -60,6 +60,6 @@
   },
   "dependencies": {
     "core-js": "^3.1.4",
-    "npm": "^6.9.0"
+    "npm": "^6.10.1"
   }
 }

wp-content/themes/biuro/css/05-layout/_layout--content.css

@@ -74,3 +74,25 @@
     }
 }
 
+
+.l-content--faq { width: 100%; flex: 1 1 auto; max-width: 1070px; padding: 35px 20px 90px; margin: 0 auto;
+    @media (--max--medium) {
+        padding: 10px;
+    }
+
+    h1 { color: #2A3644;  font-weight: 500; font-size: 22px; line-height: 29px;
+        @media (--min--medium) {
+            font-size: 25px; line-height: 38px;
+        }
+    }
+    h2 { color: #2A3644; font-weight: 500; font-size: 19px; line-height: 25px;
+        @media (--min--medium) {
+            font-size: 21px; line-height: 30px;
+        }
+    }
+    h3 { color: #2A3644;  font-weight: 500; font-size: 16px; line-height: 20px;
+        @media (--min--medium) {
+            font-size: 18px; line-height: 30px;
+        }
+    }
+}

wp-content/themes/biuro/css/07-components/__components.css

@@ -8,6 +8,7 @@ c-: Signify that something is a Component. This is a concrete, implementation-sp
 
 @import 'vendor/swiper.css';
 @import '_component--404.css';
+@import '_component--accordion.css';
 @import '_component--awesomplete.css';
 @import '_component--breadcrumbs.css';
 @import '_component--btn.css';

wp-content/themes/biuro/css/07-components/_component--accordion.css

+/* ------------- Component: accordion ------------- */
+
+/* critical:start */
+
+/* critical:end */
+
+.c-accordion--section { background: #fff; margin-bottom: 55px; }
+
+.c-accordion--header { display: flex; padding: 16px 10px; color: #2A3644; align-items: center; cursor: pointer; user-select: none;
+    @media (--min--medium) {
+        padding: 26px 30px;
+    }
+    svg { margin-right: 14px; flex: 0 0 16px; transform: rotate(0deg); transition: transform .22s linear; transform-origin: 50% 50%;
+        @media (--min--medium) {
+            margin-right: 24px;
+        }
+    }
+    h3  { margin: 0; padding: 0; font-size: 16px; line-height: 29px; font-weight: bold; line-height: 19px; }
+}
+
+.c-accordion--header--is-expanded {
+    svg { transform: rotate(225deg); }
+}
+
+.c-accordion--content { padding: 0 20px 0 40px; border-bottom: 1px solid #f8f8f8; transition: height 0.22s linear; overflow: hidden;
+    @media (--min--medium) {
+        padding: 0 30px 0 70px;
+    }
+}
+
+.c-accordion--content--is-collapsed { height: 0; }

wp-content/themes/biuro/js/main.js

@@ -611,3 +611,56 @@ const submitContactsFrom = (form) => {
 document.querySelectorAll('[name="form-position"], [name="form-employees"], [name="form-employers"]').forEach((form) => {
     form.addEventListener('submit', () => { submitContactsFrom(form); });
 });
+
+const collapseContent = (n) => {
+    const h = n.scrollHeight;
+    const t = n.style.transition;
+
+    n.style.transition = '';
+
+    requestAnimationFrame(() => {
+        n.style.height = h + 'px';
+        n.style.transition = t;
+
+        requestAnimationFrame(() => {
+            n.style.height = 0 + 'px';
+        });
+    });
+};
+
+const expandContent = (n) => {
+    const h = n.scrollHeight;
+    const done = (e) => {
+        n.removeEventListener('transitionend', done);
+
+        // n.style.height = null;
+    };
+
+    n.style.height = h + 'px';
+
+    n.addEventListener('transitionend', done);
+};
+
+document.querySelectorAll('.js-accordion--header').forEach((header) => {
+    header.addEventListener('click', () => {
+        const node = header.nextElementSibling;
+
+        if (!node || !node.classList.contains('c-accordion--content')) {
+            return;
+        }
+
+        const isOpen = header.classList.contains('c-accordion--header--is-expanded');
+
+        if (isOpen) {
+            collapseContent(node);
+        } else {
+            expandContent(node);
+        }
+
+        header.classList.toggle('c-accordion--header--is-expanded', !isOpen);
+    });
+});
+
+document.querySelectorAll('.c-accordion--content').forEach((content) => {
+    content.classList.add('c-accordion--content--is-collapsed');
+});

wp-content/themes/biuro/page-faq.php

+<?php
+/**
+ * Template Name: FAQ page
+ *
+ * This is the page for a FAQ content
+ *
+ * @link https://codex.wordpress.org/Template_Hierarchy
+ *
+ * @package WordPress
+ * @subpackage Biuro
+ * @since 1.0
+ * @version 1.0
+ */
+
+get_header(); ?>
+
+    <div id="content" class="l-content--faq">
+        <main id="main" class="l-main l-main--faq">
+
+<?php
+        while ( have_posts() ) :
+
+            the_post();
+            the_content();
+
+        endwhile;
+?>
+
+        </main><!-- .l-main -->
+    </div><!-- #content -->
+
+<?php get_footer();

wp-content/themes/biuro/template-parts/svg/icons.php

@@ -67,6 +67,9 @@
     <symbol id="ico--close" viewBox="0 0 13 13">
         <path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" d="M6.5,6.5L0.843,0.843L6.5,6.5 l-5.657,5.657L6.5,6.5z M6.5,6.5l5.657,5.657L6.5,6.5l5.657-5.657L6.5,6.5z"/>
     </symbol>
+    <symbol id="ico--plus" viewBox="0 0 16 16">
+        <path fill="none" stroke="#2A3644" stroke-width="2" stroke-linecap="square" d="M8,8V0V8H0H8z M8,8v8V8h8H8z"/>
+    </symbol>
     <symbol id="ico--attachment" viewBox="0 0 16 21">
         <path class="u-fill--inherit" d="M1.873,18.799c-1.883-2.266-1.884-5.934,0-8.201L9.18,1.808c1.45-1.744,3.808-1.744,5.258,0 c1.453,1.748,1.453,4.578,0,6.326l-6.152,7.402c-1.02,1.227-2.679,1.227-3.699,0c-1.022-1.23-1.023-3.221,0-4.451l5.21-6.269 c0.152-0.183,0.399-0.183,0.551,0l0.551,0.663c0.152,0.183,0.152,0.48,0,0.663l-5.21,6.269c-0.413,0.497-0.413,1.302,0,1.799 c0.412,0.496,1.083,0.496,1.495,0l6.152-7.402c0.844-1.015,0.844-2.659,0-3.674c-0.842-1.013-2.212-1.013-3.054,0l-7.306,8.791 c-1.274,1.533-1.275,4.015,0,5.549c1.276,1.535,3.341,1.535,4.616-0.001c1.755-2.114,4.605-5.544,6.361-7.656 c0.152-0.183,0.399-0.183,0.551,0l0.551,0.663c0.152,0.183,0.152,0.48,0,0.663c-1.756,2.113-4.605,5.543-6.36,7.656 C6.809,21.067,3.758,21.067,1.873,18.799z"/>
     </symbol>