setmy-info-less-extended 4.0.0 → 4.2.0

package/dist/main.css

@@ -24,6 +24,7 @@ Content components moved out of the base module to keep base minimal: section, m
 All reference base design tokens (imported for tokens only by this package's main.less) but live in
 the extended layer.
 */
+/* header.less */
 /* section.less */
 /* Full viewport height — use for hero or landing sections */
 .fullViewport {
@@ -110,6 +111,15 @@ the extended layer.
   border-style: none;
   line-height: 1;
 }
+#modalBody {
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  position: absolute;
+  background: grey;
+  opacity: 0.5;
+}
 /* card.less */
 /* Base content card */
 .card {

package/dist/main.min.css

@@ -1 +1 @@
-.fullViewport{height:100vh;width:100%}.pageSection{width:100%;padding-top:20px;padding-bottom:20px}.pageSectionNarrow{width:100%;max-width:1024px;margin:0 auto;padding:20px 10px}.sectionContentCenter{display:table;width:100%;height:100%;text-align:center}.sectionContentRow{overflow:hidden}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.5);z-index:800}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);max-width:640px;width:90%;max-height:80vh;overflow-y:auto;background:#fff;border-radius:6px;z-index:900}.modalHeader{padding:10px 20px;border-bottom:1px solid #ccc;font-weight:700}.modalBody{padding:20px;overflow-y:auto}.modalFooter{padding:10px 20px;border-top:1px solid #ccc;text-align:right}.modalClose{position:absolute;top:10px;right:10px;cursor:pointer;background:0 0;border-style:none;line-height:1}.card{border-style:solid;border-width:2px;border-color:#ccc;border-radius:6px;padding:20px;background:#fff;box-sizing:border-box}.cardTitle{font-weight:700;margin-bottom:10px}.cardBody{color:#000}.cardGrid{overflow:hidden}.articleBody{line-height:1.7;max-width:75ch}.codeInline{font-family:monospace;background:#f3f4f6;padding-left:4px;padding-right:4px;border-radius:3px;font-size:75%}.codePre{font-family:monospace;background:#f3f4f6;padding:10px 20px;border-radius:6px;overflow-x:auto;line-height:1.5;white-space:pre}.blockquote{border-left:4px solid #93c5fd;padding-left:20px;margin-top:10px;margin-bottom:10px;color:#696969;font-style:italic}.definitionTerm{font-weight:700;margin-top:10px}.definitionDesc{margin-left:20px;color:#696969}
+.fullViewport{height:100vh;width:100%}.pageSection{width:100%;padding-top:20px;padding-bottom:20px}.pageSectionNarrow{width:100%;max-width:1024px;margin:0 auto;padding:20px 10px}.sectionContentCenter{display:table;width:100%;height:100%;text-align:center}.sectionContentRow{overflow:hidden}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.5);z-index:800}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);max-width:640px;width:90%;max-height:80vh;overflow-y:auto;background:#fff;border-radius:6px;z-index:900}.modalHeader{padding:10px 20px;border-bottom:1px solid #ccc;font-weight:700}.modalBody{padding:20px;overflow-y:auto}.modalFooter{padding:10px 20px;border-top:1px solid #ccc;text-align:right}.modalClose{position:absolute;top:10px;right:10px;cursor:pointer;background:0 0;border-style:none;line-height:1}#modalBody{height:100%;width:100%;top:0;left:0;position:absolute;background:grey;opacity:.5}.card{border-style:solid;border-width:2px;border-color:#ccc;border-radius:6px;padding:20px;background:#fff;box-sizing:border-box}.cardTitle{font-weight:700;margin-bottom:10px}.cardBody{color:#000}.cardGrid{overflow:hidden}.articleBody{line-height:1.7;max-width:75ch}.codeInline{font-family:monospace;background:#f3f4f6;padding-left:4px;padding-right:4px;border-radius:3px;font-size:75%}.codePre{font-family:monospace;background:#f3f4f6;padding:10px 20px;border-radius:6px;overflow-x:auto;line-height:1.5;white-space:pre}.blockquote{border-left:4px solid #93c5fd;padding-left:20px;margin-top:10px;margin-bottom:10px;color:#696969;font-style:italic}.definitionTerm{font-weight:700;margin-top:10px}.definitionDesc{margin-left:20px;color:#696969}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "setmy-info-less-extended",
-    "version": "4.0.0",
+    "version": "4.2.0",
     "description": "SMI LESS project",
     "main": "dist/main.min.css",
     "dependencies": {
@@ -17,11 +17,10 @@
         "watch:pug": "node ../common/test/js/pugWatch.js",
         "clean": "rimraf dist",
         "clean:all": "rimraf dist node_modules",
-        "verify": "npm test && npm run e2e && npm run lint:less && npm run cucumber",
+        "verify": "npm test && npm run e2e && npm run lint:less",
         "test": "jest",
         "e2e": "jest --config=jest.e2e.config.js",
         "e2e:one": "jest --config=jest.e2e.config.js --testNamePattern",
-        "cucumber": "cucumber-js",
         "lint:less": "stylelint ./src/main/less/**/*.less",
         "lint:fix-less": "stylelint ./src/main/less/**/*.less --fix",
         "styleguide": "kss-node --source src/main/less --destination dist/styleguide --css ../main.css"

package/src/main/less/utility/header.less

@@ -0,0 +1 @@
+/* header.less */

package/src/main/less/utility/index.less

@@ -5,6 +5,7 @@ Content components moved out of the base module to keep base minimal: section, m
 All reference base design tokens (imported for tokens only by this package's main.less) but live in
 the extended layer.
 */
+@import url("header.less");
 @import url("section.less");
 @import url("modal.less");
 @import url("card.less");

package/src/main/less/utility/modal.less

@@ -59,3 +59,13 @@
     border-style: none;
     line-height: 1;
 }
+
+#modalBody {
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    position: absolute;
+    background: grey;
+    opacity: .5;
+}

package/src/test/js/e2e/article.gherkin.e2e.js

@@ -0,0 +1,18 @@
+const {feature, scenario, given, when, then, runFeature} = require('../../../../../common/test/js/gherkin');
+
+const articleFeature = feature('article page',
+    scenario('article rendering with specific properties',
+        given.pageNameIs('article'),
+        when.pageIsRendered(),
+        when.pageElementIdIs('article'),
+        then.pageShouldHaveTitle('article.html'),
+        then.pageElementStyleShouldBe('line-height', '27.2px'),
+        then.pageElementFontSizeShouldBe('16px'),
+        then.pageElementColorShouldBe('rgb(0, 0, 0)'),
+        then.pageIsClosed()
+    )
+);
+
+runFeature(articleFeature);
+
+module.exports = articleFeature;

package/src/test/js/e2e/body.gherkin.e2e.js

@@ -0,0 +1,27 @@
+const {feature, scenario, given, when, then, runFeature} = require('../../../../../common/test/js/gherkin');
+
+const bodyFeature = feature('body page',
+    scenario('body rendering with specific properties',
+        given.pageNameIs('body'),
+        when.pageIsRendered(),
+        when.pageElementIdIs('body'),
+        then.pageShouldHaveTitle('body.html'),
+        then.pageElementMarginShouldBe('0px 0px 0px 0px'),
+        then.pageElementPaddingShouldBe('0px 0px 0px 0px'),
+        then.pageElementFontFamilyShouldBe('DejaVu Serif, Roboto, Arial, Noto Sans, Noto, sans-serif'),
+        then.pageElementFontSizeShouldBe('16px'),
+        then.pageElementXShouldBe(0),
+        then.pageElementYShouldBe(0),
+        then.pageElementWidthShouldBe(2000),
+        then.pageElementHeightShouldBe(1200),
+        then.pageElementTopShouldBe(0),
+        then.pageElementLeftShouldBe(0),
+        then.pageElementBackgroundColorShouldBe('rgba(0, 0, 0, 0)'),
+        then.pageElementColorShouldBe('rgb(0, 0, 0)'),
+        then.pageIsClosed()
+    )
+);
+
+runFeature(bodyFeature);
+
+module.exports = bodyFeature;

package/src/test/js/e2e/card.gherkin.e2e.js

@@ -0,0 +1,20 @@
+const {feature, scenario, given, when, then, runFeature} = require('../../../../../common/test/js/gherkin');
+
+const cardFeature = feature('card page',
+    scenario('card rendering with specific properties',
+        given.pageNameIs('card'),
+        when.pageIsRendered(),
+        when.pageElementIdIs('card'),
+        then.pageShouldHaveTitle('card.html'),
+        then.pageElementPaddingShouldBe('20px 20px 20px 20px'),
+        then.pageElementBackgroundColorShouldBe('rgb(255, 255, 255)'),
+        then.pageElementStyleShouldBe('border-top-width', '2px'),
+        then.pageElementStyleShouldBe('border-top-color', 'rgb(204, 204, 204)'),
+        then.pageElementStyleShouldBe('border-top-left-radius', '6px'),
+        then.pageIsClosed()
+    )
+);
+
+runFeature(cardFeature);
+
+module.exports = cardFeature;

package/src/test/js/e2e/modal.gherkin.e2e.js

@@ -0,0 +1,34 @@
+const {feature, scenario, given, when, then, runFeature} = require('../../../../../common/test/js/gherkin');
+
+const modalFeature = feature('modal page',
+    scenario('overlay rendering with specific properties',
+        given.pageNameIs('modal'),
+        when.pageIsRendered(),
+        when.pageElementIdIs('overlay'),
+        then.pageShouldHaveTitle('modal.html'),
+        then.pageElementStyleShouldBe('position', 'fixed'),
+        then.pageElementTopShouldBe(0),
+        then.pageElementLeftShouldBe(0),
+        then.pageElementWidthShouldBe(2000),
+        then.pageElementHeightShouldBe(1200),
+        then.pageElementBackgroundColorShouldBe('rgba(0, 0, 0, 0.5)'),
+        then.pageIsClosed()
+    ),
+    scenario('modal dialog rendering with specific properties',
+        given.pageNameIs('modal'),
+        when.pageIsRendered(),
+        when.pageElementIdIs('modal'),
+        then.pageShouldHaveTitle('modal.html'),
+        then.pageElementStyleShouldBe('position', 'fixed'),
+        then.pageElementStyleShouldBe('max-width', '640px'),
+        then.pageElementStyleShouldBe('width', '640px'),
+        then.pageElementStyleShouldBe('max-height', '960px'),
+        then.pageElementBackgroundColorShouldBe('rgb(255, 255, 255)'),
+        then.pageElementStyleShouldBe('border-top-left-radius', '6px'),
+        then.pageIsClosed()
+    )
+);
+
+runFeature(modalFeature);
+
+module.exports = modalFeature;

package/src/test/js/e2e/section.gherkin.e2e.js

@@ -0,0 +1,18 @@
+const {feature, scenario, given, when, then, runFeature} = require('../../../../../common/test/js/gherkin');
+
+const sectionFeature = feature('section page',
+    scenario('section rendering with specific properties',
+        given.pageNameIs('section'),
+        when.pageIsRendered(),
+        when.pageElementIdIs('section'),
+        then.pageShouldHaveTitle('section.html'),
+        then.pageElementStyleShouldBe('max-width', '1024px'),
+        then.pageElementPaddingShouldBe('20px 10px 20px 10px'),
+        then.pageElementStyleShouldBe('width', '1024px'),
+        then.pageIsClosed()
+    )
+);
+
+runFeature(sectionFeature);
+
+module.exports = sectionFeature;

package/cucumber.js

@@ -1,10 +0,0 @@
-module.exports = {
-    default: [
-        `--format-options '{"snippetInterface": "synchronous"}'`,
-        '--require ../common/test/js/bdd/support.js',
-        '--require ../common/test/js/bdd/given.js',
-        '--require ../common/test/js/bdd/when.js',
-        '--require ../common/test/js/bdd/then.js',
-        './src/test/gherkin'
-    ].join(' ')
-};

package/src/test/gherkin/article.feature

@@ -1,11 +0,0 @@
-Feature: article page
-
-    Scenario: article rendering with specific properties
-        Given page name is "article"
-        When page is rendered
-        And page element ID is "article"
-        Then page should have title "article.html"
-        And page element style "line-height" should be "27.2px"
-        And page element font size should be "16px"
-        And page element color should be "rgb(0, 0, 0)"
-        And page is closed

package/src/test/gherkin/body.feature

@@ -1,20 +0,0 @@
-Feature: body page
-
-    Scenario: body rendering with specific properties
-        Given page name is "body"
-        When page is rendered
-        And page element ID is "body"
-        Then page should have title "body.html"
-        And page element margin should be "0px 0px 0px 0px"
-        And page element padding should be "0px 0px 0px 0px"
-        And page element font family should be "DejaVu Serif, Roboto, Arial, Noto Sans, Noto, sans-serif"
-        And page element font size should be "16px"
-        And page element X should be 0
-        And page element Y should be 0
-        And page element WIDTH should be 2000
-        And page element HEIGHT should be 1200
-        And page element TOP should be 0
-        And page element LEFT should be 0
-        And page element background color should be "rgba(0, 0, 0, 0)"
-        And page element color should be "rgb(0, 0, 0)"
-        And page is closed

package/src/test/gherkin/card.feature

@@ -1,13 +0,0 @@
-Feature: card page
-
-    Scenario: card rendering with specific properties
-        Given page name is "card"
-        When page is rendered
-        And page element ID is "card"
-        Then page should have title "card.html"
-        And page element padding should be "20px 20px 20px 20px"
-        And page element background color should be "rgb(255, 255, 255)"
-        And page element style "border-top-width" should be "2px"
-        And page element style "border-top-color" should be "rgb(204, 204, 204)"
-        And page element style "border-top-left-radius" should be "6px"
-        And page is closed

package/src/test/gherkin/modal.feature

@@ -1,27 +0,0 @@
-Feature: modal page
-
-    Scenario: overlay rendering with specific properties
-        Given page name is "modal"
-        When page is rendered
-        And page element ID is "overlay"
-        Then page should have title "modal.html"
-        And page element style "position" should be "fixed"
-        And page element TOP should be 0
-        And page element LEFT should be 0
-        And page element WIDTH should be 2000
-        And page element HEIGHT should be 1200
-        And page element background color should be "rgba(0, 0, 0, 0.5)"
-        And page is closed
-
-    Scenario: modal dialog rendering with specific properties
-        Given page name is "modal"
-        When page is rendered
-        And page element ID is "modal"
-        Then page should have title "modal.html"
-        And page element style "position" should be "fixed"
-        And page element style "max-width" should be "640px"
-        And page element style "width" should be "640px"
-        And page element style "max-height" should be "960px"
-        And page element background color should be "rgb(255, 255, 255)"
-        And page element style "border-top-left-radius" should be "6px"
-        And page is closed

package/src/test/gherkin/section.feature

@@ -1,11 +0,0 @@
-Feature: section page
-
-    Scenario: section rendering with specific properties
-        Given page name is "section"
-        When page is rendered
-        And page element ID is "section"
-        Then page should have title "section.html"
-        And page element style "max-width" should be "1024px"
-        And page element padding should be "20px 10px 20px 10px"
-        And page element style "width" should be "1024px"
-        And page is closed