fix: simplify playground experience (#1458)

SAP · May 24, 2019 · 7441cd8 · 7441cd8
1 parent d2b3e06
commit 7441cd8
Show file tree

Hide file tree

Showing 137 changed files with 594 additions and 430 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,8 +16,11 @@
     "lint": "stylelint './scss/**/*.scss'",
     "release:create": "create-release",
     "release": "./scripts/publish-release.sh",
-    "start:playground": "node test/app.js",
-    "start:playground:scs": "PORT=3031 SELF_CONTAINED=true npm run start:playground",
+    "start:playground": "npm-run-all --parallel start:playground:default start:playground:scs start:playground:comparison",
+    "start:playground:default": "node test/app.js",
+    "start:playground:comparison": "node playground/app.js",
+    "start:playground:ie11": "PORT=3032 IE11=true npm run start:playground:default",
+    "start:playground:scs": "PORT=3031 SELF_CONTAINED=true npm run start:playground:default",
     "start:browser-sync": "browser-sync start --proxy 'localhost:4000' --files 'docs/_site/**/*' --reloadDelay '2000'",
     "start": "npm run docs:compile && cd docs && bundle install && bundle exec jekyll serve --incremental --config _config.yml,_config-library.yml",
     "std-version": "standard-version -m \"chore(release): version %s build ${TRAVIS_BUILD_NUMBER} [ci skip]\"",
@@ -28,10 +31,10 @@
     "style:postCSS": "postcss --config config/postcss.config.js  --replace dist/**/*.css && postcss --config config/postcss.config.js  --replace dist/*.css",
     "style:remove": "if [ -d dist/ ]; then rm -rf dist/; fi",
     "style:rename": "mv dist/all.css dist/fiori-fundamentals.css && mv dist/all-ie11.css dist/fiori-fundamentals-ie11.css",
-    "test": "server-test start:playground http-get://localhost:3030 test:visual",
+    "test": "server-test start:playground:default http-get://localhost:3030 test:visual",
     "test:ci-config": "./ci-scripts/generateBackstopConfig.js",
     "test:reference": "backstop reference --config ./test/visual-regression-tests/config/backstopConfig.js --docker",
-    "test:update": "server-test start:playground http-get://localhost:3030 test:reference && backstop approve --config ./test/visual-regression-tests/config/backstopConfig.js",
+    "test:update": "server-test start:playground:default http-get://localhost:3030 test:reference && backstop approve --config ./test/visual-regression-tests/config/backstopConfig.js",
     "test:visual": "backstop test --config ./test/visual-regression-tests/config/backstopConfig.js --docker"
   },
   "repository": {
@@ -58,6 +61,7 @@
     "ip": "^1.1.5",
     "load-json-file": "^5.2.0",
     "node-sass": "^4.9.4",
+    "npm-run-all": "^4.1.5",
     "nunjucks": "^3.1.3",
     "postcss-banner": "^3.0.1",
     "postcss-clean": "^1.1.0",

diff --git a/playground/app.js b/playground/app.js
@@ -0,0 +1,16 @@
+const express = require('express');
+const path = require('path');
+const app = express();
+const signale = require('signale');
+
+app.set('port', 4000);
+
+app.use(express.static(path.join(__dirname, '/static')));
+
+app.get('*', function(req, res) {
+    res.sendFile('index.html', { root: path.join(__dirname, '../playground') });
+});
+
+app.listen(4000);
+signale.watch(`Listening at http://localhost:4000`);
+module.exports = app;
diff --git a/playground/index.html b/playground/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Comparison Playground</title>
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" type="text/css" href="/app.css">
+</head>
+
+<body>
+    <h1>Comparison Playground</h1>
+    <div class='playground-container'>
+        <iframe src='http://localhost:3031/#'></iframe>
+        <iframe src='http://localhost:3030/#'></iframe>
+    </div>
+</body>
+</html>
diff --git a/playground/static/app.css b/playground/static/app.css
@@ -0,0 +1,14 @@
+.playground-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 100%;
+  }
+
+.playground-container iframe {
+    display: flex;
+    flex-direction: column;
+    flex-basis: 100%;
+    flex: 1;
+    height: 100vh;
+}
diff --git a/test/app.js b/test/app.js
@@ -218,7 +218,7 @@ router.get('/:key', (req, res) => {
 
     }
     signale.info(`Requested http://localhost:${port}/${key}`);
-    res.render(`${key}/index`, Object.assign(GLOBALS, { id: key, component: getStarterData(), data, selfContained: process.env.SELF_CONTAINED }));
+    res.render(`${key}/index`, Object.assign(GLOBALS, { id: key, component: getStarterData(), data, selfContained: process.env.SELF_CONTAINED, ie11: process.env.IE11 }));
 });
 
 

diff --git a/test/templates/action-bar/index.njk b/test/templates/action-bar/index.njk
@@ -6,8 +6,6 @@
 {% from "./../popover/component.njk" import popover %}
 {% import "./../utils.njk" as utils %}
 
-<!-- include add'tl css from src/styles/, e.g., ['helpers','components/button'] -->
-{% set css_deps = ['fonts','icons','components/button', 'components/menu', 'components/popover'] %}
 
 {% block content %}
 <style media="screen">

diff --git a/test/templates/alert/index.njk b/test/templates/alert/index.njk
@@ -3,10 +3,6 @@
 {% from "../button/component.njk" import button %}
 {% from "./component.njk" import alert %}
 
-<!-- include add'tl css from src/styles/ -->
-{% set css_deps = ['fonts', 'icons', 'components/button', 'components/link'] %}
-
-
 
 {% block content %}
 

diff --git a/test/templates/badge/index.njk b/test/templates/badge/index.njk
@@ -3,9 +3,6 @@
 {% from "../button/component.njk" import button %}
 {% from "./component.njk" import badge %}
 
-<!-- include add'tl css from src/styles/, e.g., ['helpers','components/button'] -->
-{% set css_deps = ['fonts'] %}
-
 {% block content %}
 
 

diff --git a/test/templates/breadcrumb/index.njk b/test/templates/breadcrumb/index.njk
@@ -3,10 +3,6 @@
 {% from "../button/component.njk" import button %}
 {% from "./component.njk" import breadcrumb %}
 
-<!-- include add'tl css from src/styles/, e.g., ['helpers','components/button'] -->
-{% set css_deps = [] %}
-
-
 {% block content %}
 <div style="background: #f3f4f5; margin:-20px; padding:20px;">
 

diff --git a/test/templates/button-group/index.njk b/test/templates/button-group/index.njk
@@ -3,9 +3,6 @@
 {% from "../button/component.njk" import button %}
 {% from "./component.njk" import button_group %}
 
-<!-- include add'tl css from src/styles/, e.g., ['helpers','components/button'] -->
-{% set css_deps = ['components/button','icons'] %}
-
 {% block content %}
 <style media="screen">
   .fd-button-group {

diff --git a/test/templates/button/index.njk b/test/templates/button/index.njk
@@ -2,7 +2,6 @@
 {% from "./../format.njk" import format %}
 {% from "./component.njk" import button %}
 {% from "./component-anchor.njk" import anchor_button %}
-{% set css_deps = ['fonts','helpers','icons'] %}
 
 {% macro btncode(content="",bgcolor="transparent") %}
 <div style="background-color:{{bgcolor}}">

diff --git a/test/templates/calendar/index.njk b/test/templates/calendar/index.njk
@@ -3,9 +3,6 @@
 {% from "../button/component.njk" import button %}
 {% from "./component.njk" import calendar %}
 
-<!-- include add'tl css from src/styles/, e.g., ['helpers','components/button'] -->
-{% set css_deps = ['icons','components/button'] %}
-
 {% block content %}
 <style>
 main {background-color: white;}

diff --git a/test/templates/checkbox/index.njk b/test/templates/checkbox/index.njk
@@ -2,8 +2,6 @@
 {% from "./../format.njk" import format %}
 {% import "../forms.njk" as forms %}
 
-{% set css_deps = ['fonts','helpers'] %}
-
 {% block content %}
 
     {% set basic_checkbox %}

diff --git a/test/templates/combobox-input/index.njk b/test/templates/combobox-input/index.njk
@@ -2,8 +2,6 @@
 {% from "./component.njk" import combobox_input %}
 {% from "./../format.njk" import format %}
 
-{% set css_deps = ['fonts','helpers', 'components/menu', 'components/popover','components/button','components/input-group', 'icons'] %}
-
 {% block content %}
 
 

diff --git a/test/templates/contextual-menu/index.njk b/test/templates/contextual-menu/index.njk
@@ -5,9 +5,6 @@
 {% from "./../popover/component.njk" import popover_body %}
 {% import "./../utils.njk" as utils %}
 
-<!-- include add'tl css from src/styles/, e.g., ['helpers','components/button'] -->
-{% set css_deps = ['fonts','icons','components/button','components/menu', 'components/popover'] %}
-
 {% block content %}
 <style>
   .fd-popover {

diff --git a/test/templates/counter/index.njk b/test/templates/counter/index.njk
@@ -2,8 +2,6 @@
 {% from "./component.njk" import counter %}
 {% from "./../format.njk" import format %}
 
-{% set css_deps = ['fonts','helpers','icons', 'components/menu', 'components/tabs', 'components/button'] %}
-
 {% block content %}
 <div>
 

diff --git a/test/templates/date-picker/index.njk b/test/templates/date-picker/index.njk
@@ -3,8 +3,6 @@
 {% from "./../format.njk" import format %}
 {% from "./../date-picker/component.njk" import date_picker %}
 
-{% set css_deps = ['fonts','components/button','icons','components/input-group','components/calendar', 'components/popover', 'components/date-picker'] %}
-
 {% block content %}
   <h2>default</h2>
 

diff --git a/test/templates/dropdown/index.njk b/test/templates/dropdown/index.njk
@@ -4,9 +4,6 @@
 {% from "../menu/component.njk" import menu %}
 {% from "./component.njk" import dropdown %}
 
-<!-- include add'tl css from src/styles/, e.g., ['helpers','components/button'] -->
-{% set css_deps = ['fonts','components/button','icons', 'components/popover', 'components/menu'] %}
-
 {% block content %}
 
   <style media="screen">

diff --git a/test/templates/form/index.njk b/test/templates/form/index.njk
@@ -4,9 +4,6 @@
 {% from "./../format.njk" import format %}
 {% import "./../utils.njk" as utils %}
 
-<!-- include add'tl css from src/styles/, e.g., ['helpers','components/button'] -->
-{% set css_deps = ['fonts','components/inline-help', 'icons'] %}
-
 {% block content %}
 
 <p>Form elements are unique in that they can be used independently. In most cases, you will not need a <code>.fd-form</code> wrapper, it can be inferred.</p>

diff --git a/test/templates/global-nav/index.njk b/test/templates/global-nav/index.njk
@@ -7,9 +7,6 @@
 {% from "../nav/component.njk" import nav %}
 {% from "./component.njk" import global_nav %}
 
-<!-- include add'tl css from src/styles/, e.g., ['helpers','components/button'] -->
-{% set css_deps = ['icons', 'components/button', 'components/dropdown', 'components/nav', 'components/mega-menu', 'components/identifier', 'components/popover', 'components/menu', 'helpers'] %}
-
 {% block content %}
 
 <style media="screen">

diff --git a/test/templates/identifier/index.njk b/test/templates/identifier/index.njk
@@ -3,9 +3,6 @@
 {% from "../button/component.njk" import button %}
 {% from "./component.njk" import identifier %}
 
-<!-- include add'tl css from src/styles/, e.g., ['helpers','components/button'] -->
-{% set css_deps = ['fonts','icons','helpers'] %}
-
 {% block content %}
 
 <h1>Specs</h1>

diff --git a/test/templates/image/index.njk b/test/templates/image/index.njk
@@ -3,9 +3,6 @@
 {% from "../button/component.njk" import button %}
 {% from "./component.njk" import image %}
 
-<!-- include add'tl css from src/styles/, e.g., ['helpers','components/button'] -->
-{% set css_deps = ['fonts','icons'] %}
-
 {% block content %}
 
 

diff --git a/test/templates/inline-help/index.njk b/test/templates/inline-help/index.njk
@@ -4,9 +4,6 @@
 {% from "./component.njk" import inline_help %}
 {% import "./../utils.njk" as utils %}
 
-<!-- include add'tl css from src/styles/, e.g., ['helpers','components/button'] -->
-{% set css_deps = ['components/button', 'components/form'] %}
-
 {% block content %}
 
 

diff --git a/test/templates/input-group/index.njk b/test/templates/input-group/index.njk
@@ -3,7 +3,6 @@
 {% from "../button/component.njk" import button %}
 {% from "../icon/component.njk" import icon %}
 {% from "./../format.njk" import format %}
-{% set css_deps = ['fonts','helpers','components/button','icons'] %}
 
 {% block content %}
 <style media="screen">

diff --git a/test/templates/input/index.njk b/test/templates/input/index.njk
@@ -2,8 +2,6 @@
 {% import "../forms.njk" as forms %}
 {% from "./../format.njk" import format %}
 
-{% set css_deps = ['fonts','helpers'] %}
-
 {% block content %}
 
 

diff --git a/test/templates/label/index.njk b/test/templates/label/index.njk
@@ -2,9 +2,6 @@
 {% from "./../format.njk" import format %}
 {% from "./component.njk" import label %}
 
-<!-- include add'tl css from src/styles/, e.g., ['helpers','components/button'] -->
-{% set css_deps = ['fonts'] %}
-
 {% block content %}
 <h2>default</h2>
     <!-- output the component example and the code snippet -->

diff --git a/test/templates/layout.njk b/test/templates/layout.njk
@@ -7,32 +7,29 @@
     <title>{{ id }}</title>
     <link rel="stylesheet" href="static/layout.css">
     <style>
-        {% if not selfContained %}
-            {% set core_sass = 'core.scss' %}
-            {{ core_sass | sass_to_css }}
-
-            {% for sass in css_deps %}
-                {% set dep_sass = sass + '.scss' %}
-                {{ dep_sass | sass_to_css }}
-            {% endfor %}
-        {% endif %}
-        {% if id === 'icon' %}
-            {% set component_sass = 'icons.scss' %}
-        {% elif id === 'radio' or id === 'checkbox' or id === 'input' %}
-            {% set component_sass = 'components/form.scss' %}
-        {% elif id === 'panel' or id === 'panel-grid' or id === 'layout' %}
-            {% set component_sass = 'layout.scss' %}
+        {% if ie11 %}
+            {% set sass = 'all-ie11.scss' %}
+        {% elif selfContained %}
+            {% if id === 'icon' %}
+                {% set sass = 'icons.scss' %}
+            {% elif id === 'radio' or id === 'checkbox' or id === 'input' %}
+                {% set sass = 'components/form.scss' %}
+            {% elif id === 'panel' or id === 'panel-grid' or id === 'layout' %}
+                {% set sass = 'layout.scss' %}
+            {% else %}
+                {% set sass = 'components/' + id + '.scss'  %}
+            {% endif %}
         {% else %}
-            {% set component_sass = 'components/' + id + '.scss'  %}
+         {% set sass = 'all.scss' %}
         {% endif %}
-        {{ component_sass | sass_to_css }}
+        {{ sass | sass_to_css }}
     </style>
 </head>
 
 <body>
     <a href="../">Back to Index</a>
     <header class="test-header">
-        <h1>{% if selfContained %}Self-Contained Styles Playground{% else %}Playground{% endif %}: <code>{{ data.id }}</code></h1>
+        <h1>{% if selfContained %}Self-Contained Styles Playground{% elif ie11 %}IE11 Playground{% else %}Playground{% endif %}: <code>{{ data.id }}</code></h1>
         <form action="#" method="get">
             <fieldset class="test-fieldset">
                 <label class="test-label"><input type="checkbox" value="" id="toggleBg"> Toggle BG</label>

diff --git a/test/templates/layout/index.njk b/test/templates/layout/index.njk
@@ -3,9 +3,6 @@
 {% from "../button/component.njk" import button %}
 {% from "./component.njk" import container, col %}
 
-<!-- include add'tl css from src/styles/, e.g., ['helpers','components/button'] -->
-{% set css_deps = ['fonts','layout','helpers'] %}
-
 {% block content %}
 
     <style media="screen">

diff --git a/test/templates/link/index.njk b/test/templates/link/index.njk
@@ -3,9 +3,6 @@
 {% from "../button/component.njk" import button %}
 {% from "./component.njk" import link %}
 
-<!-- include add'tl css from src/styles/, e.g., ['helpers','components/button'] -->
-{% set css_deps = ['icons'] %}
-
 {% block content %}
 
     <!-- output the component example and the code snippet -->

diff --git a/test/templates/list-group/index.njk b/test/templates/list-group/index.njk
@@ -4,7 +4,6 @@
 {% from "../button/component.njk" import button %}
 {% from "../icon/component.njk" import icon %}
 {% from "./../format.njk" import format %}
-{% set css_deps = ['fonts','helpers','components/button','components/form','icons'] %}
 
 {% block content %}
 

diff --git a/test/templates/localization-editor/index.njk b/test/templates/localization-editor/index.njk
@@ -7,8 +7,6 @@
 {% import "../forms.njk" as forms %}
 {% from "./component.njk" import localization_editor %}
 
-{% set css_deps = ['fonts','helpers', 'components/form', 'components/menu', 'components/popover','components/button','components/input-group', 'icons'] %}
-
 {% block content %}
 <h2>with input</h2>
 

diff --git a/test/templates/mega-menu/index.njk b/test/templates/mega-menu/index.njk
@@ -3,9 +3,6 @@
 {% from "../button/component.njk" import button %}
 {% from "./component.njk" import mega_menu %}
 
-<!-- include add'tl css from src/styles/, e.g., ['helpers','components/button'] -->
-{% set css_deps = ['components/nav', 'icons'] %}
-
 {% block content %}
 
     <h1>mega-menu</h1>
-Original file line number
+Diff line change
@@ Expand Up / @@ -218,7 +218,7 @@ router.get('/:key', (req, res) => { @@
         }
         signale.info(`Requested http://localhost:${port}/${key}`);
-        res.render(`${key}/index`, Object.assign(GLOBALS, { id: key, component: getStarterData(), data, selfContained: process.env.SELF_CONTAINED }));
+        res.render(`${key}/index`, Object.assign(GLOBALS, { id: key, component: getStarterData(), data, selfContained: process.env.SELF_CONTAINED, ie11: process.env.IE11 }));
     });
@@ Expand Down @@