setmy-info-less-extended 3.0.0 → 3.1.0

package/README.md

@@ -0,0 +1,56 @@
+# setmy-info-less-extended
+
+Extended content components on top of the base module: page sections, modal/overlay, cards, and
+article typography. These higher-level patterns were moved out of the base package to keep the base
+minimal (resets, tokens, single-purpose utilities). This package does **not** own the
+NetBeans-inspired IDE frame shell — that lives in `setmy-info-less-ide`.
+
+**For what:** Adding common content patterns (sections, modals, cards, article text) on top of the
+base utilities.
+
+**For who:** Front-end developers building page content on top of the base module.
+
+## Install
+
+```shell
+npm i setmy-info-less-extended
+```
+
+* https://www.npmjs.com/package/setmy-info-less-extended
+
+## Dependencies
+
+Depends on [`setmy-info-less`](../setmy-info-less/README.md). Load base CSS before this.
+
+## Usage
+
+```html
+<link rel="stylesheet" href="node_modules/setmy-info-less/dist/main.css">
+<link rel="stylesheet" href="node_modules/setmy-info-less-extended/dist/main.css">
+```
+
+Or from CDN:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/setmy-info-less-extended/dist/main.min.css">
+```
+
+## What is included
+
+| Group | Classes |
+|---|---|
+| Section | `.fullViewport`, `.pageSection`, `.pageSectionNarrow`, `.sectionContentCenter`, `.sectionContentRow` |
+| Modal | `.overlay`, `.modal`, `.modalHeader`, `.modalBody`, `.modalFooter`, `.modalClose` |
+| Card | `.card`, `.cardTitle`, `.cardBody`, `.cardGrid` |
+| Article | `.articleBody`, `.codeInline`, `.codePre`, `.blockquote`, `.definitionTerm`, `.definitionDesc` |
+
+These reference base design tokens but ship only as this package's own CSS (standalone/delta — base
+CSS is not bundled). Load the base stylesheet before this one.
+
+## Development
+
+```shell
+npm run build
+npm run lint:less
+npm run verify
+```

package/cucumber.js

@@ -1,9 +1,10 @@
 module.exports = {
     default: [
         `--format-options '{"snippetInterface": "synchronous"}'`,
-        '--require ./src/test/js/bdd/given.js',
-        '--require ./src/test/js/bdd/when.js',
-        '--require ./src/test/js/bdd/then.js',
+        '--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/dist/main.css

@@ -1,76 +1,182 @@
+/*
+Main entry point for the extended module.
+
+Distribution model: STANDALONE / DELTA.
+`dist/main.css` contains ONLY this package's own rules — it does not bundle the base
+module's CSS. Consumers load the stylesheets in dependency order:
+
+    setmy-info-less  ->  setmy-info-less-extended
+
+This package is currently a skeleton: it has no rules of its own yet. The base module's
+`values/index.less` is imported for TOKENS ONLY (LESS variables produce no CSS output), so
+future extended rules can reference shared tokens without re-emitting base styles here.
+Stable NetBeans-style frame presets live in `setmy-info-less-ide`.
+*/
+/* Base tokens only (no CSS output) — gives future rules access to shared variables */
 /* values/main.less */
 /* values/colors/main.less */
 /* values/fonts/main.less */
-body.framesDefaultPadding {
-  height: calc(100% - 0px);
-  width: calc(100% - 0px);
-  padding: 0px;
-}
-.contentHeader {
+/* This package's own rules (empty skeleton — add files via utility/index.less) */
+/*
+Extended utility classes.
+
+Higher-level content patterns moved here from the base module: page sections, modal/overlay,
+cards, and article typography. These reference base design tokens (imported for tokens only by
+this package's main.less) but live in the extended layer so the base module stays minimal.
+*/
+/* section.less */
+/* Full viewport height — use for hero or landing sections */
+.fullViewport {
+  height: 100vh;
   width: 100%;
-  height: 50px;
 }
-.defaultHeader {
+/* Generic full-width content section with vertical padding */
+.pageSection {
   width: 100%;
-  height: 25px;
+  padding-top: 20px;
+  padding-bottom: 20px;
 }
-.content {
+/* Width-constrained centered content section — combine with .centerBox */
+.pageSectionNarrow {
   width: 100%;
-  height: calc(100% - 75px);
-}
-.contentFooter {
+  max-width: 1024px;
+  margin: 0 auto;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  padding: 20px 10px;
+}
+/* Centers child content vertically and horizontally — display:table works in IE8+ */
+.sectionContentCenter {
+  display: table;
   width: 100%;
-  height: 25px;
-}
-.sectionLeft {
-  width: calc(30% - 8px - 4px);
-  height: 100%;
-}
-.verticalSeparator {
-  width: 8px;
-  height: 100%;
-  display: block;
-}
-.sectionRight {
-  width: 70%;
   height: 100%;
-}
-.sectionHeader {
-  width: 100%;
-  height: 25px;
-}
-.sectionLeftUp {
-  width: 100%;
-  height: calc(60% - 4px - 8px);
-}
-.contentLeftUp {
-  width: 100%;
-  height: calc(100% - 25px);
-}
-.horizontalSeparator {
-  height: 4px;
-}
-.sectionLeftBottom {
-  width: 100%;
-  height: calc(40%);
-}
-.contentLeftBottom {
-  width: 100%;
-  height: calc(100% - 25px);
-}
-.sectionRightUp {
-  width: 100%;
-  height: 30%;
-}
-.contentRightUp {
-  width: 100%;
-  height: calc(100% - 25px);
-}
-.sectionRightBottom {
-  width: 100%;
-  height: calc(70% - 4px - 8px);
-}
-.contentRightBottom {
-  width: 100%;
-  height: calc(100% - 25px);
+  text-align: center;
+}
+/* Clearfix for floated children arranged in a row */
+.sectionContentRow {
+  overflow: hidden;
+}
+/* modal.less */
+/* Full-screen overlay — blocks background; JS controls visibility toggle */
+.overlay {
+  position: fixed;
+  /* stylelint-disable declaration-block-no-redundant-longhand-properties */
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 800;
+}
+/* Centered dialog box — JS controls open/close; LESS handles size and position only */
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 640px;
+  width: 90%;
+  max-height: 80vh;
+  overflow-y: auto;
+  background: #ffffff;
+  border-radius: 6px;
+  z-index: 900;
+}
+.modalHeader {
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  padding: 10px 20px;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  border-bottom: 1px solid #cccccc;
+  font-weight: bold;
+}
+.modalBody {
+  padding: 20px;
+  overflow-y: auto;
+}
+.modalFooter {
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  padding: 10px 20px;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  border-top: 1px solid #cccccc;
+  text-align: right;
+}
+/* Absolute close button — position inside .modal which has position:fixed */
+.modalClose {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  cursor: pointer;
+  background: transparent;
+  border-style: none;
+  line-height: 1;
+}
+/* card.less */
+/* Base content card */
+.card {
+  border-style: solid;
+  border-width: 2px;
+  border-color: #cccccc;
+  border-radius: 6px;
+  padding: 20px;
+  background: #ffffff;
+  box-sizing: border-box;
+}
+/* Card heading */
+.cardTitle {
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+/* Card body text area */
+.cardBody {
+  color: black;
+}
+/* Wrapping row of cards — clearfix for floated children */
+.cardGrid {
+  overflow: hidden;
+}
+/* article.less */
+/* Long-form article text container */
+.articleBody {
+  line-height: 1.7;
+  max-width: 75ch;
+}
+/* Inline code span */
+.codeInline {
+  font-family: monospace;
+  background: #f3f4f6;
+  padding-left: 4px;
+  padding-right: 4px;
+  border-radius: 3px;
+  font-size: 75%;
+}
+/* Block code area */
+.codePre {
+  font-family: monospace;
+  background: #f3f4f6;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  padding: 10px 20px;
+  border-radius: 6px;
+  overflow-x: auto;
+  line-height: 1.5;
+  white-space: pre;
+}
+/* Block quotation with left accent border */
+.blockquote {
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  border-left: 4px solid #93c5fd;
+  padding-left: 20px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  color: dimgray;
+  font-style: italic;
+}
+/* Definition list term */
+.definitionTerm {
+  font-weight: bold;
+  margin-top: 10px;
+}
+/* Definition list description */
+.definitionDesc {
+  margin-left: 20px;
+  color: dimgray;
 }

package/dist/main.min.css

@@ -1 +1 @@
-body.framesDefaultPadding{height:calc(100% - 0px);width:calc(100% - 0px);padding:0}.contentHeader{width:100%;height:50px}.defaultHeader{width:100%;height:25px}.content{width:100%;height:calc(100% - 75px)}.contentFooter{width:100%;height:25px}.sectionLeft{width:calc(30% - 8px - 4px);height:100%}.verticalSeparator{width:8px;height:100%;display:block}.sectionRight{width:70%;height:100%}.sectionHeader{width:100%;height:25px}.sectionLeftUp{width:100%;height:calc(60% - 4px - 8px)}.contentLeftUp{width:100%;height:calc(100% - 25px)}.horizontalSeparator{height:4px}.sectionLeftBottom{width:100%;height:calc(40%)}.contentLeftBottom{width:100%;height:calc(100% - 25px)}.sectionRightUp{width:100%;height:30%}.contentRightUp{width:100%;height:calc(100% - 25px)}.sectionRightBottom{width:100%;height:calc(70% - 4px - 8px)}.contentRightBottom{width:100%;height:calc(100% - 25px)}
+.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}

package/jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  roots: [
+    '<rootDir>',
+    '<rootDir>/../common'
+  ],
+  testMatch: [
+    '**/__tests__/**/*.?([mc])[jt]s?(x)',
+    '**/?(*.)+(spec|test).?([mc])[jt]s?(x)'
+  ]
+};

package/jest.e2e.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    testMatch: ['**/*.e2e.js'],
+    testTimeout: 60000,
+    maxWorkers: 1
+};

package/package.json

@@ -1,37 +1,36 @@
 {
     "name": "setmy-info-less-extended",
-    "version": "3.0.0",
+    "version": "3.1.0",
     "description": "SMI LESS project",
     "main": "dist/main.min.css",
     "dependencies": {
         "setmy-info-less": "*"
     },
     "scripts": {
-        "build": "npm run css && npm run css-min && npm run html",
-        "build:experimental": "npm run css:experimental",
+        "build": "npm run css && npm run css-min && npm run html && npm run styleguide",
         "css": "lessc ./src/main/less/main.less dist/main.css",
-        "css:experimental": "lessc ./src/main/less/experimental/main.less dist/experimental.css",
         "css-min": "lessc ./src/main/less/main.less dist/main.min.css --clean-css",
         "css:debug": "lessc --modify-var=debug=true ./src/main/less/main.less dist/main.css",
-        "html": "node ./src/test/js/pugBuild.js",
-        "start": "node ./src/test/js/server.js",
+        "html": "node ../common/test/js/pugBuild.js",
+        "start": "node ../common/test/js/server.js",
         "watch": "less-watch-compiler ./src/main/less dist main.less",
-        "watch:pug": "node ./src/test/js/pugWatch.js",
+        "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",
         "test": "jest",
-        "e2e": "npx playwright test --config=playwright.config.js",
-        "e2e:one": "npx playwright test --config=playwright.config.js",
+        "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"
+        "lint:fix-less": "stylelint ./src/main/less/**/*.less --fix",
+        "styleguide": "kss-node --source src/main/less --destination dist/styleguide --css ../main.css"
     },
     "keywords": [
         "less",
         "css",
         "pug",
-        "playwright",
+        "selenium",
         "jest"
     ],
     "author": "Imre Tabur <imre.tabur@mail.ee>",
@@ -42,19 +41,18 @@
     },
     "homepage": "https://github.com/setmy-info/setmy-info-less",
     "devDependencies": {
-        "@cucumber/cucumber": "^12.6.0",
-        "@playwright/test": "^1.53.1",
-        "express": "^5.1.0",
-        "jest": "^30.2.0",
-        "less": "^4.3.0",
+        "express": "^5.2.1",
+        "jest": "^30.4.2",
+        "kss": "^2.4.0",
+        "less": "^4.6.6",
         "less-plugin-clean-css": "^1.6.0",
-        "less-watch-compiler": "^1.16.3",
-        "playwright": "^1.53.1",
+        "less-watch-compiler": "^1.17.5",
         "postcss-less": "^6.0.0",
-        "pug": "^3.0.3",
-        "rimraf": "^6.0.1",
-        "stylelint": "^16.21.1",
-        "stylelint-config-standard": "^38.0.0",
-        "stylelint-less": "^3.0.1"
+        "selenium-webdriver": "^4.45.0",
+        "pug": "^3.0.4",
+        "rimraf": "^6.1.3",
+        "stylelint": "^17.13.0",
+        "stylelint-config-standard": "^40.0.0",
+        "stylelint-less": "^4.2.1"
     }
 }

package/playwright.config.js

@@ -1,16 +1,9 @@
-const {defineConfig} = require('@playwright/test');
-const firefoxHelper = require('./src/test/js/firefoxHelper');
+/*
+LEGACY STUB — retained intentionally, kept empty on purpose (not removed).
 
-const firefoxPath = firefoxHelper.getFirefoxPath();
-
-module.exports = defineConfig({
-    testDir: 'src/test/js',
-    timeout: 30000,
-    retries: 0,
-    use: {
-        headless: false,
-        browserName: 'firefox',
-        executablePath: firefoxPath
-    },
-    testMatch: '**/*.e2e.js'
-});
+Playwright is no longer used: e2e tests run via an external Selenium Grid through the Jest
+runner (see jest.e2e.config.js and ../common/test/js/pageHelper.js). This empty config remains
+as a marker of the migration and to avoid breaking any tooling or muscle-memory that still
+references a playwright.config.js. It is deliberately a no-op and exports nothing meaningful.
+*/
+module.exports = {};

package/src/main/less/main.less

@@ -1,3 +1,28 @@
+/*
+Main entry point for the extended module.
+
+Distribution model: STANDALONE / DELTA.
+`dist/main.css` contains ONLY this package's own rules — it does not bundle the base
+module's CSS. Consumers load the stylesheets in dependency order:
+
+    setmy-info-less  ->  setmy-info-less-extended
+
+This package is currently a skeleton: it has no rules of its own yet. The base module's
+`values/index.less` is imported for TOKENS ONLY (LESS variables produce no CSS output), so
+future extended rules can reference shared tokens without re-emitting base styles here.
+Stable NetBeans-style frame presets live in `setmy-info-less-ide`.
+*/
+
+// Extended module
+//
+// Optional additions on top of `setmy-info-less`. Load the base CSS before this file.
+//
+// Markup: <div class="smi-frame"></div>
+//
+// Styleguide: packages.extended
+
+/* Base tokens only (no CSS output) — gives future rules access to shared variables */
 @import url("../../../../setmy-info-less/src/main/less/values/index.less");
-@import url("frames/index.less");
 
+/* This package's own rules (empty skeleton — add files via utility/index.less) */
+@import url("utility/index.less");

package/src/main/less/utility/article.less

@@ -0,0 +1,52 @@
+/* article.less */
+
+/* Long-form article text container */
+.articleBody {
+    line-height: @articleLineHeight;
+    max-width: 75ch;
+}
+
+/* Inline code span */
+.codeInline {
+    font-family: monospace;
+    background: @gray-100;
+    padding-left: 4px;
+    padding-right: 4px;
+    border-radius: 3px;
+    font-size: @smallFontSize;
+}
+
+/* Block code area */
+.codePre {
+    font-family: monospace;
+    background: @gray-100;
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
+    padding: @defaultPadding @doubleDefaultPadding;
+    border-radius: @defaultBorderRadius;
+    overflow-x: auto;
+    line-height: 1.5;
+    white-space: pre;
+}
+
+/* Block quotation with left accent border */
+.blockquote {
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
+    border-left: 4px solid @blue-300;
+    padding-left: @doubleDefaultPadding;
+    margin-top: @defaultPadding;
+    margin-bottom: @defaultPadding;
+    color: @quinaryColor;
+    font-style: italic;
+}
+
+/* Definition list term */
+.definitionTerm {
+    font-weight: bold;
+    margin-top: @defaultPadding;
+}
+
+/* Definition list description */
+.definitionDesc {
+    margin-left: @doubleDefaultPadding;
+    color: @quinaryColor;
+}

package/src/main/less/utility/card.less

@@ -0,0 +1,28 @@
+/* card.less */
+
+/* Base content card */
+.card {
+    border-style: solid;
+    border-width: @defaultBorder;
+    border-color: @tertiaryColor;
+    border-radius: @defaultBorderRadius;
+    padding: @doubleDefaultPadding;
+    background: @secondaryBackgroundColor;
+    box-sizing: border-box;
+}
+
+/* Card heading */
+.cardTitle {
+    font-weight: bold;
+    margin-bottom: @defaultPadding;
+}
+
+/* Card body text area */
+.cardBody {
+    color: @textColor;
+}
+
+/* Wrapping row of cards — clearfix for floated children */
+.cardGrid {
+    overflow: hidden;
+}

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

@@ -0,0 +1,11 @@
+/*
+Extended utility classes.
+
+Higher-level content patterns moved here from the base module: page sections, modal/overlay,
+cards, and article typography. These reference base design tokens (imported for tokens only by
+this package's main.less) but live in the extended layer so the base module stays minimal.
+*/
+@import url("section.less");
+@import url("modal.less");
+@import url("card.less");
+@import url("article.less");

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

@@ -0,0 +1,61 @@
+/* modal.less */
+
+/* Full-screen overlay — blocks background; JS controls visibility toggle */
+.overlay {
+    position: fixed;
+    /* stylelint-disable declaration-block-no-redundant-longhand-properties */
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+    background: @overlayBackgroundColor;
+    z-index: @z-index-8;
+}
+
+/* Centered dialog box — JS controls open/close; LESS handles size and position only */
+.modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 640px;
+    width: 90%;
+    max-height: 80vh;
+    overflow-y: auto;
+    background: @secondaryBackgroundColor;
+    border-radius: @defaultBorderRadius;
+    z-index: @z-index-9;
+}
+
+.modalHeader {
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
+    padding: @defaultPadding @doubleDefaultPadding;
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
+    border-bottom: 1px solid @tertiaryColor;
+    font-weight: bold;
+}
+
+.modalBody {
+    padding: @doubleDefaultPadding;
+    overflow-y: auto;
+}
+
+.modalFooter {
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
+    padding: @defaultPadding @doubleDefaultPadding;
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
+    border-top: 1px solid @tertiaryColor;
+    text-align: right;
+}
+
+/* Absolute close button — position inside .modal which has position:fixed */
+.modalClose {
+    position: absolute;
+    top: @defaultPadding;
+    right: @defaultPadding;
+    cursor: pointer;
+    background: transparent;
+    border-style: none;
+    line-height: 1;
+}