From 5bbee082c4e0d2d8187fbd487827090baf010fbe Mon Sep 17 00:00:00 2001 From: "Josef Bredereck Josef.Bredereck@signal-iduna.de" Date: Mon, 6 Feb 2023 11:03:11 +0100 Subject: [PATCH 01/21] feat: add nx workspace settings --- .gitignore | 40 +- .prettierignore | 4 +- .prettierrc | 7 +- .vscode/extensions.json | 2 +- jest.config.ts | 5 + jest.preset.js | 3 + lerna.json | 28 +- nx.json | 43 + package.json | 80 +- packages/cli/.eslintrc.json | 18 + packages/core/.eslintrc.js | 3 - packages/core/.eslintrc.json | 18 + packages/core/package.json | 2 - packages/create/.eslintrc.json | 18 + packages/create/package.json | 1 - .../.gitignore | 2 +- .../source/_annotations/annotations.json | 13 +- .../source/_data/data.json | 25 +- .../source/_meta/_head.hbs | 4 +- .../source/css/pattern-scaffolding.css | 284 +- .../source/css/style.css | 2250 +++++++++++ packages/docs/.eslintrc.json | 18 + packages/edition-node-gulp/.editorconfig | 11 - packages/edition-node-gulp/.eslintrc.json | 18 + packages/edition-node-gulp/.gitignore | 9 - packages/edition-node-gulp/.npmrc | 2 - packages/edition-node-gulp/.nvmrc | 1 - packages/edition-node-gulp/jest.config.ts | 15 + packages/edition-node-gulp/package.json | 18 +- packages/edition-node-gulp/project.json | 57 + .../edition-node-gulp/{ => src}/gulpfile.js | 2 +- packages/edition-node-gulp/src/index.ts | 0 .../{ => src}/patternlab-config.json | 0 .../{ => src}/source/_annotations/README.md | 0 .../{ => src}/source/_data/README.md | 0 .../{ => src}/source/_data/data.json | 0 .../{ => src}/source/_meta/README.md | 0 .../{ => src}/source/_meta/_foot.mustache | 0 .../{ => src}/source/_meta/_head.mustache | 0 .../{ => src}/source/_patterns/README.md | 0 .../{ => src}/source/css/README.md | 0 .../source/css/pattern-scaffolding.css | 0 .../{ => src}/source/css/style.css | 0 .../{ => src}/source/favicon.ico | Bin .../{ => src}/source/fonts/README.md | 0 .../{ => src}/source/images/README.md | 0 .../{ => src}/source/js/README.md | 0 packages/edition-node-gulp/tsconfig.json | 22 + packages/edition-node-gulp/tsconfig.lib.json | 10 + packages/edition-node-gulp/tsconfig.spec.json | 14 + packages/edition-node/.editorconfig | 11 - packages/edition-node/.eslintrc.json | 18 + packages/edition-node/.gitignore | 9 - packages/edition-node/.npmrc | 2 - packages/edition-node/.nvmrc | 1 - packages/edition-node/jest.config.ts | 15 + packages/edition-node/package.json | 16 +- packages/edition-node/project.json | 57 + .../edition-node/{ => src}/helpers/test.js | 0 packages/edition-node/src/index.ts | 0 .../{ => src}/patternlab-config.json | 0 .../{ => src}/source/_annotations/README.md | 0 .../{ => src}/source/_data/README.md | 0 .../{ => src}/source/_meta/README.md | 0 .../{ => src}/source/_meta/_foot.mustache | 0 .../{ => src}/source/_meta/_head.mustache | 0 .../{ => src}/source/_patterns/README.md | 0 .../{ => src}/source/css/README.md | 0 .../edition-node/{ => src}/source/favicon.ico | Bin .../{ => src}/source/fonts/README.md | 0 .../{ => src}/source/images/README.md | 0 .../{ => src}/source/js/README.md | 0 packages/edition-node/tsconfig.json | 22 + packages/edition-node/tsconfig.lib.json | 10 + packages/edition-node/tsconfig.spec.json | 14 + packages/edition-twig/.editorconfig | 11 - packages/edition-twig/.eslintrc.json | 18 + packages/edition-twig/.gitignore | 9 - packages/edition-twig/.patternlabrc.js | 4 - packages/edition-twig/LICENSE | 20 + packages/edition-twig/README.md | 2 + packages/edition-twig/jest.config.ts | 15 + packages/edition-twig/package.json | 18 +- packages/edition-twig/patternlab-config.json | 170 +- packages/edition-twig/project.json | 57 + .../edition-twig/{ => src}/alter-twig.php | 0 packages/edition-twig/src/index.ts | 0 .../edition-twig/src/patternlab-config.json | 169 + .../source/_annotations/annotations.json | 0 .../{ => src}/source/_data/data.json | 0 .../{ => src}/source/_data/listitems.json | 0 .../{ => src}/source/_layouts/.gitkeep | 0 .../{ => src}/source/_macros/.gitkeep | 0 .../{ => src}/source/_meta/_foot.mustache | 0 .../{ => src}/source/_meta/_foot.twig | 0 .../{ => src}/source/_meta/_head.mustache | 0 .../{ => src}/source/_meta/_head.twig | 0 .../_patterns/atoms/buttons/_button.twig | 0 .../atoms/buttons/button-dark-demo.twig | 0 .../atoms/buttons/button-simple-demo.twig | 0 .../source/_patterns/atoms/text/headings.twig | 0 .../source/_patterns/molecules/.gitkeep | 0 .../source/_patterns/molecules/card/card.twig | 0 .../source/_patterns/organisms/.gitkeep | 0 .../{ => src}/source/_patterns/pages/.gitkeep | 0 .../source/_patterns/templates/.gitkeep | 0 .../source/_twig-components/filters/.gitkeep | 0 .../_twig-components/functions/.gitkeep | 0 .../source/_twig-components/tags/.gitkeep | 0 .../source/_twig-components/tests/.gitkeep | 0 .../{ => src}/source/css/.gitkeep | 0 .../edition-twig/{ => src}/source/favicon.ico | Bin .../{ => src}/source/fonts/.gitkeep | 0 .../{ => src}/source/images/.gitkeep | 0 .../edition-twig/{ => src}/source/js/.gitkeep | 0 packages/edition-twig/tsconfig.json | 22 + packages/edition-twig/tsconfig.lib.json | 10 + packages/edition-twig/tsconfig.spec.json | 14 + packages/engine-handlebars/.eslintrc.json | 18 + packages/engine-handlebars/.gitignore | 10 - packages/engine-handlebars/.npmrc | 2 - packages/engine-handlebars/.nvmrc | 1 - packages/engine-handlebars/jest.config.ts | 15 + .../lib/engine_handlebars.js | 162 - packages/engine-handlebars/package.json | 7 - packages/engine-handlebars/project.json | 51 + packages/engine-handlebars/src/index.ts | 2 + .../src/lib/engine-handlebars.spec.ts | 7 + .../src/lib/engine-handlebars.ts | 139 + packages/engine-handlebars/tsconfig.json | 22 + packages/engine-handlebars/tsconfig.lib.json | 10 + packages/engine-handlebars/tsconfig.spec.json | 14 + packages/engine-liquid/.eslintrc.json | 18 + packages/engine-liquid/.gitignore | 10 - packages/engine-liquid/.npmrc | 2 - packages/engine-liquid/.nvmrc | 1 - packages/engine-liquid/jest.config.ts | 15 + packages/engine-liquid/lib/engine_liquid.js | 194 - packages/engine-liquid/package.json | 6 - packages/engine-liquid/project.json | 51 + packages/engine-liquid/src/index.ts | 1 + .../src/lib/engine-liquid.spec.ts | 7 + .../engine-liquid/src/lib/engine-liquid.ts | 135 + .../lib/utilities/liquid.util.ts} | 38 +- packages/engine-liquid/tsconfig.json | 22 + packages/engine-liquid/tsconfig.lib.json | 10 + packages/engine-liquid/tsconfig.spec.json | 14 + packages/engine-mustache/.eslintrc.json | 18 + packages/engine-mustache/.gitignore | 10 - packages/engine-mustache/.npmrc | 2 - packages/engine-mustache/.nvmrc | 1 - packages/engine-mustache/jest.config.ts | 15 + .../engine-mustache/lib/engine_mustache.js | 172 - packages/engine-mustache/package.json | 6 - packages/engine-mustache/project.json | 51 + packages/engine-mustache/src/index.ts | 1 + .../src/lib/engine-mustache.spec.ts | 7 + .../src/lib/engine-mustache.ts | 120 + .../lib/utilities/mustache.util.ts} | 38 +- packages/engine-mustache/tsconfig.json | 22 + packages/engine-mustache/tsconfig.lib.json | 10 + packages/engine-mustache/tsconfig.spec.json | 14 + packages/engine-nunjucks/.eslintrc.json | 18 + packages/engine-nunjucks/.gitignore | 10 - packages/engine-nunjucks/.npmignore | 10 - packages/engine-nunjucks/.npmrc | 2 - packages/engine-nunjucks/.nvmrc | 1 - packages/engine-nunjucks/README.md | 1 + packages/engine-nunjucks/jest.config.ts | 15 + .../engine-nunjucks/lib/engine_nunjucks.js | 192 - packages/engine-nunjucks/package.json | 16 +- packages/engine-nunjucks/project.json | 51 + packages/engine-nunjucks/src/index.ts | 1 + .../src/lib/engine-nunjucks.spec.ts | 7 + .../src/lib/engine-nunjucks.ts | 152 + packages/engine-nunjucks/tsconfig.json | 22 + packages/engine-nunjucks/tsconfig.lib.json | 10 + packages/engine-nunjucks/tsconfig.spec.json | 14 + packages/engine-react/package.json | 1 - packages/engine-twig-php/.eslintrc.json | 18 + packages/engine-twig-php/.gitignore | 10 - packages/engine-twig-php/.npmrc | 2 - packages/engine-twig-php/jest.config.ts | 15 + .../engine-twig-php/lib/engine_twig_php.js | 264 -- packages/engine-twig-php/package.json | 8 - packages/engine-twig-php/project.json | 51 + packages/engine-twig-php/src/index.ts | 1 + .../src/lib/engine-twig-php.spec.ts | 7 + .../src/lib/engine-twig-php.ts | 212 + packages/engine-twig-php/tsconfig.json | 22 + packages/engine-twig-php/tsconfig.lib.json | 10 + packages/engine-twig-php/tsconfig.spec.json | 14 + packages/engine-twig/.eslintrc.json | 18 + packages/engine-twig/.gitignore | 10 - packages/engine-twig/.npmrc | 2 - packages/engine-twig/.nvmrc | 1 - packages/engine-twig/jest.config.ts | 15 + packages/engine-twig/lib/engine_twig.js | 330 -- packages/engine-twig/package.json | 6 - packages/engine-twig/project.json | 47 + packages/engine-twig/src/index.ts | 1 + .../engine-twig/src/lib/engine-twig.spec.ts | 7 + packages/engine-twig/src/lib/engine-twig.ts | 199 + packages/engine-twig/src/lib/twing-loader.ts | 34 + packages/engine-twig/tsconfig.json | 22 + packages/engine-twig/tsconfig.lib.json | 10 + packages/engine-twig/tsconfig.spec.json | 14 + packages/engine-underscore/.eslintrc.json | 18 + packages/engine-underscore/.gitignore | 10 - packages/engine-underscore/.npmrc | 2 - packages/engine-underscore/.nvmrc | 1 - packages/engine-underscore/jest.config.ts | 15 + .../lib/engine_underscore.js | 224 -- packages/engine-underscore/package.json | 7 - packages/engine-underscore/project.json | 51 + packages/engine-underscore/src/index.ts | 1 + .../src/lib/engine-underscore.spec.ts | 7 + .../src/lib/engine-underscore.ts | 190 + packages/engine-underscore/tsconfig.json | 22 + packages/engine-underscore/tsconfig.lib.json | 10 + packages/engine-underscore/tsconfig.spec.json | 14 + packages/live-server/.eslintrc.json | 18 + packages/live-server/package.json | 4 +- packages/plugin-tab/.eslintrc.json | 18 + .../dist/css/pattern-scaffolding.css | 56 +- .../dist/css/pattern-scaffolding.css.map | 2 +- .../dist/css/style.css | 32 +- .../dist/css/style.css.map | 2 +- packages/types/.eslintrc.json | 18 + packages/types/README.md | 11 + packages/types/jest.config.ts | 16 + packages/types/package.json | 5 + packages/types/project.json | 40 + packages/types/src/index.ts | 2 + .../src/lib/interfaces/engine.interface.ts | 49 + packages/types/src/lib/interfaces/index.ts | 3 + .../pattern-lab-config.interface.ts | 40 + .../src/lib/interfaces/pattern.interface.ts | 16 + packages/types/src/lib/types.spec.ts | 7 + packages/types/src/lib/types.ts | 3 + packages/types/tsconfig.json | 22 + packages/types/tsconfig.lib.json | 10 + packages/types/tsconfig.spec.json | 9 + packages/uikit-polyfills/.eslintrc.json | 18 + packages/uikit-workshop/.eslintrc.json | 18 + tsconfig.base.json | 43 + yarn.lock | 3536 +++++++++++++---- 247 files changed, 8728 insertions(+), 2947 deletions(-) create mode 100644 jest.config.ts create mode 100644 jest.preset.js create mode 100644 nx.json create mode 100644 packages/cli/.eslintrc.json delete mode 100644 packages/core/.eslintrc.js create mode 100644 packages/core/.eslintrc.json create mode 100644 packages/create/.eslintrc.json create mode 100644 packages/docs/.eslintrc.json delete mode 100644 packages/edition-node-gulp/.editorconfig create mode 100644 packages/edition-node-gulp/.eslintrc.json delete mode 100644 packages/edition-node-gulp/.gitignore delete mode 100644 packages/edition-node-gulp/.npmrc delete mode 100644 packages/edition-node-gulp/.nvmrc create mode 100644 packages/edition-node-gulp/jest.config.ts create mode 100644 packages/edition-node-gulp/project.json rename packages/edition-node-gulp/{ => src}/gulpfile.js (96%) create mode 100644 packages/edition-node-gulp/src/index.ts rename packages/edition-node-gulp/{ => src}/patternlab-config.json (100%) rename packages/edition-node-gulp/{ => src}/source/_annotations/README.md (100%) rename packages/edition-node-gulp/{ => src}/source/_data/README.md (100%) rename packages/edition-node-gulp/{ => src}/source/_data/data.json (100%) rename packages/edition-node-gulp/{ => src}/source/_meta/README.md (100%) rename packages/edition-node-gulp/{ => src}/source/_meta/_foot.mustache (100%) rename packages/edition-node-gulp/{ => src}/source/_meta/_head.mustache (100%) rename packages/edition-node-gulp/{ => src}/source/_patterns/README.md (100%) rename packages/edition-node-gulp/{ => src}/source/css/README.md (100%) rename packages/edition-node-gulp/{ => src}/source/css/pattern-scaffolding.css (100%) rename packages/edition-node-gulp/{ => src}/source/css/style.css (100%) rename packages/edition-node-gulp/{ => src}/source/favicon.ico (100%) rename packages/edition-node-gulp/{ => src}/source/fonts/README.md (100%) rename packages/edition-node-gulp/{ => src}/source/images/README.md (100%) rename packages/edition-node-gulp/{ => src}/source/js/README.md (100%) create mode 100644 packages/edition-node-gulp/tsconfig.json create mode 100644 packages/edition-node-gulp/tsconfig.lib.json create mode 100644 packages/edition-node-gulp/tsconfig.spec.json delete mode 100644 packages/edition-node/.editorconfig create mode 100644 packages/edition-node/.eslintrc.json delete mode 100644 packages/edition-node/.gitignore delete mode 100644 packages/edition-node/.npmrc delete mode 100644 packages/edition-node/.nvmrc create mode 100644 packages/edition-node/jest.config.ts create mode 100644 packages/edition-node/project.json rename packages/edition-node/{ => src}/helpers/test.js (100%) create mode 100644 packages/edition-node/src/index.ts rename packages/edition-node/{ => src}/patternlab-config.json (100%) rename packages/edition-node/{ => src}/source/_annotations/README.md (100%) rename packages/edition-node/{ => src}/source/_data/README.md (100%) rename packages/edition-node/{ => src}/source/_meta/README.md (100%) rename packages/edition-node/{ => src}/source/_meta/_foot.mustache (100%) rename packages/edition-node/{ => src}/source/_meta/_head.mustache (100%) rename packages/edition-node/{ => src}/source/_patterns/README.md (100%) rename packages/edition-node/{ => src}/source/css/README.md (100%) rename packages/edition-node/{ => src}/source/favicon.ico (100%) rename packages/edition-node/{ => src}/source/fonts/README.md (100%) rename packages/edition-node/{ => src}/source/images/README.md (100%) rename packages/edition-node/{ => src}/source/js/README.md (100%) create mode 100644 packages/edition-node/tsconfig.json create mode 100644 packages/edition-node/tsconfig.lib.json create mode 100644 packages/edition-node/tsconfig.spec.json delete mode 100644 packages/edition-twig/.editorconfig create mode 100644 packages/edition-twig/.eslintrc.json delete mode 100644 packages/edition-twig/.gitignore delete mode 100644 packages/edition-twig/.patternlabrc.js create mode 100644 packages/edition-twig/LICENSE create mode 100644 packages/edition-twig/jest.config.ts create mode 100644 packages/edition-twig/project.json rename packages/edition-twig/{ => src}/alter-twig.php (100%) create mode 100644 packages/edition-twig/src/index.ts create mode 100644 packages/edition-twig/src/patternlab-config.json rename packages/edition-twig/{ => src}/source/_annotations/annotations.json (100%) mode change 100755 => 100644 rename packages/edition-twig/{ => src}/source/_data/data.json (100%) mode change 100755 => 100644 rename packages/edition-twig/{ => src}/source/_data/listitems.json (100%) rename packages/edition-twig/{ => src}/source/_layouts/.gitkeep (100%) mode change 100755 => 100644 rename packages/edition-twig/{ => src}/source/_macros/.gitkeep (100%) mode change 100755 => 100644 rename packages/edition-twig/{ => src}/source/_meta/_foot.mustache (100%) rename packages/edition-twig/{ => src}/source/_meta/_foot.twig (100%) rename packages/edition-twig/{ => src}/source/_meta/_head.mustache (100%) rename packages/edition-twig/{ => src}/source/_meta/_head.twig (100%) rename packages/edition-twig/{ => src}/source/_patterns/atoms/buttons/_button.twig (100%) rename packages/edition-twig/{ => src}/source/_patterns/atoms/buttons/button-dark-demo.twig (100%) rename packages/edition-twig/{ => src}/source/_patterns/atoms/buttons/button-simple-demo.twig (100%) rename packages/edition-twig/{ => src}/source/_patterns/atoms/text/headings.twig (100%) rename packages/edition-twig/{ => src}/source/_patterns/molecules/.gitkeep (100%) rename packages/edition-twig/{ => src}/source/_patterns/molecules/card/card.twig (100%) rename packages/edition-twig/{ => src}/source/_patterns/organisms/.gitkeep (100%) rename packages/edition-twig/{ => src}/source/_patterns/pages/.gitkeep (100%) rename packages/edition-twig/{ => src}/source/_patterns/templates/.gitkeep (100%) rename packages/edition-twig/{ => src}/source/_twig-components/filters/.gitkeep (100%) mode change 100755 => 100644 rename packages/edition-twig/{ => src}/source/_twig-components/functions/.gitkeep (100%) mode change 100755 => 100644 rename packages/edition-twig/{ => src}/source/_twig-components/tags/.gitkeep (100%) mode change 100755 => 100644 rename packages/edition-twig/{ => src}/source/_twig-components/tests/.gitkeep (100%) mode change 100755 => 100644 rename packages/edition-twig/{ => src}/source/css/.gitkeep (100%) mode change 100755 => 100644 rename packages/edition-twig/{ => src}/source/favicon.ico (100%) rename packages/edition-twig/{ => src}/source/fonts/.gitkeep (100%) mode change 100755 => 100644 rename packages/edition-twig/{ => src}/source/images/.gitkeep (100%) mode change 100755 => 100644 rename packages/edition-twig/{ => src}/source/js/.gitkeep (100%) mode change 100755 => 100644 create mode 100644 packages/edition-twig/tsconfig.json create mode 100644 packages/edition-twig/tsconfig.lib.json create mode 100644 packages/edition-twig/tsconfig.spec.json create mode 100644 packages/engine-handlebars/.eslintrc.json delete mode 100644 packages/engine-handlebars/.gitignore delete mode 100644 packages/engine-handlebars/.npmrc delete mode 100644 packages/engine-handlebars/.nvmrc create mode 100644 packages/engine-handlebars/jest.config.ts delete mode 100644 packages/engine-handlebars/lib/engine_handlebars.js create mode 100644 packages/engine-handlebars/project.json create mode 100644 packages/engine-handlebars/src/index.ts create mode 100644 packages/engine-handlebars/src/lib/engine-handlebars.spec.ts create mode 100644 packages/engine-handlebars/src/lib/engine-handlebars.ts create mode 100644 packages/engine-handlebars/tsconfig.json create mode 100644 packages/engine-handlebars/tsconfig.lib.json create mode 100644 packages/engine-handlebars/tsconfig.spec.json create mode 100644 packages/engine-liquid/.eslintrc.json delete mode 100644 packages/engine-liquid/.gitignore delete mode 100644 packages/engine-liquid/.npmrc delete mode 100644 packages/engine-liquid/.nvmrc create mode 100644 packages/engine-liquid/jest.config.ts delete mode 100644 packages/engine-liquid/lib/engine_liquid.js create mode 100644 packages/engine-liquid/project.json create mode 100644 packages/engine-liquid/src/index.ts create mode 100644 packages/engine-liquid/src/lib/engine-liquid.spec.ts create mode 100644 packages/engine-liquid/src/lib/engine-liquid.ts rename packages/engine-liquid/{lib/util_liquid.js => src/lib/utilities/liquid.util.ts} (78%) create mode 100644 packages/engine-liquid/tsconfig.json create mode 100644 packages/engine-liquid/tsconfig.lib.json create mode 100644 packages/engine-liquid/tsconfig.spec.json create mode 100644 packages/engine-mustache/.eslintrc.json delete mode 100644 packages/engine-mustache/.gitignore delete mode 100644 packages/engine-mustache/.npmrc delete mode 100644 packages/engine-mustache/.nvmrc create mode 100644 packages/engine-mustache/jest.config.ts delete mode 100644 packages/engine-mustache/lib/engine_mustache.js create mode 100644 packages/engine-mustache/project.json create mode 100644 packages/engine-mustache/src/index.ts create mode 100644 packages/engine-mustache/src/lib/engine-mustache.spec.ts create mode 100644 packages/engine-mustache/src/lib/engine-mustache.ts rename packages/engine-mustache/{lib/util_mustache.js => src/lib/utilities/mustache.util.ts} (79%) create mode 100644 packages/engine-mustache/tsconfig.json create mode 100644 packages/engine-mustache/tsconfig.lib.json create mode 100644 packages/engine-mustache/tsconfig.spec.json create mode 100644 packages/engine-nunjucks/.eslintrc.json delete mode 100644 packages/engine-nunjucks/.gitignore delete mode 100644 packages/engine-nunjucks/.npmignore delete mode 100644 packages/engine-nunjucks/.npmrc delete mode 100644 packages/engine-nunjucks/.nvmrc create mode 100644 packages/engine-nunjucks/jest.config.ts delete mode 100644 packages/engine-nunjucks/lib/engine_nunjucks.js create mode 100644 packages/engine-nunjucks/project.json create mode 100644 packages/engine-nunjucks/src/index.ts create mode 100644 packages/engine-nunjucks/src/lib/engine-nunjucks.spec.ts create mode 100644 packages/engine-nunjucks/src/lib/engine-nunjucks.ts create mode 100644 packages/engine-nunjucks/tsconfig.json create mode 100644 packages/engine-nunjucks/tsconfig.lib.json create mode 100644 packages/engine-nunjucks/tsconfig.spec.json create mode 100644 packages/engine-twig-php/.eslintrc.json delete mode 100644 packages/engine-twig-php/.gitignore delete mode 100644 packages/engine-twig-php/.npmrc create mode 100644 packages/engine-twig-php/jest.config.ts delete mode 100644 packages/engine-twig-php/lib/engine_twig_php.js create mode 100644 packages/engine-twig-php/project.json create mode 100644 packages/engine-twig-php/src/index.ts create mode 100644 packages/engine-twig-php/src/lib/engine-twig-php.spec.ts create mode 100644 packages/engine-twig-php/src/lib/engine-twig-php.ts create mode 100644 packages/engine-twig-php/tsconfig.json create mode 100644 packages/engine-twig-php/tsconfig.lib.json create mode 100644 packages/engine-twig-php/tsconfig.spec.json create mode 100644 packages/engine-twig/.eslintrc.json delete mode 100644 packages/engine-twig/.gitignore delete mode 100644 packages/engine-twig/.npmrc delete mode 100644 packages/engine-twig/.nvmrc create mode 100644 packages/engine-twig/jest.config.ts delete mode 100644 packages/engine-twig/lib/engine_twig.js create mode 100644 packages/engine-twig/project.json create mode 100644 packages/engine-twig/src/index.ts create mode 100644 packages/engine-twig/src/lib/engine-twig.spec.ts create mode 100644 packages/engine-twig/src/lib/engine-twig.ts create mode 100644 packages/engine-twig/src/lib/twing-loader.ts create mode 100644 packages/engine-twig/tsconfig.json create mode 100644 packages/engine-twig/tsconfig.lib.json create mode 100644 packages/engine-twig/tsconfig.spec.json create mode 100644 packages/engine-underscore/.eslintrc.json delete mode 100644 packages/engine-underscore/.gitignore delete mode 100644 packages/engine-underscore/.npmrc delete mode 100644 packages/engine-underscore/.nvmrc create mode 100644 packages/engine-underscore/jest.config.ts delete mode 100644 packages/engine-underscore/lib/engine_underscore.js create mode 100644 packages/engine-underscore/project.json create mode 100644 packages/engine-underscore/src/index.ts create mode 100644 packages/engine-underscore/src/lib/engine-underscore.spec.ts create mode 100644 packages/engine-underscore/src/lib/engine-underscore.ts create mode 100644 packages/engine-underscore/tsconfig.json create mode 100644 packages/engine-underscore/tsconfig.lib.json create mode 100644 packages/engine-underscore/tsconfig.spec.json create mode 100644 packages/live-server/.eslintrc.json create mode 100644 packages/plugin-tab/.eslintrc.json create mode 100644 packages/types/.eslintrc.json create mode 100644 packages/types/README.md create mode 100644 packages/types/jest.config.ts create mode 100644 packages/types/package.json create mode 100644 packages/types/project.json create mode 100644 packages/types/src/index.ts create mode 100644 packages/types/src/lib/interfaces/engine.interface.ts create mode 100644 packages/types/src/lib/interfaces/index.ts create mode 100644 packages/types/src/lib/interfaces/pattern-lab-config.interface.ts create mode 100644 packages/types/src/lib/interfaces/pattern.interface.ts create mode 100644 packages/types/src/lib/types.spec.ts create mode 100644 packages/types/src/lib/types.ts create mode 100644 packages/types/tsconfig.json create mode 100644 packages/types/tsconfig.lib.json create mode 100644 packages/types/tsconfig.spec.json create mode 100644 packages/uikit-polyfills/.eslintrc.json create mode 100644 packages/uikit-workshop/.eslintrc.json create mode 100644 tsconfig.base.json diff --git a/.gitignore b/.gitignore index fd845fc5a..6e7e61e77 100644 --- a/.gitignore +++ b/.gitignore @@ -1,10 +1,7 @@ node_modules/ pattern_exports/ -.DS_Store -Thumbs.db .nyc_output/ .idea/ -.env packages/core/test/public packages/*/public !packages/core/test/patterns/public/.gitkeep @@ -12,5 +9,42 @@ packages/*/public lerna-debug.log packages/edition-node-gulp/dependencyGraph.json packages/uikit-workshop/dist +.yarn + +yarn-error.log + +# compiled output +dist +tmp +/out-tsc +# misc +/.sass-cache +/connect.lock +/coverage +/libpeerconnection.log +npm-debug.log yarn-error.log +testem.log +/typings +.env + +# System Files +.DS_Store +Thumbs.db + +# IDEs and editors +/.idea +.project +.classpath +.c9/ +*.launch +.settings/ +*.sublime-workspace + +# IDE - VSCode +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json \ No newline at end of file diff --git a/.prettierignore b/.prettierignore index bdfdbff8b..37b0881b8 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,4 +1,3 @@ -**/*.json **/README.md **/node_modules/ **/bower_components/ @@ -9,9 +8,10 @@ packages/core/scripts/api.handlebars packages/core/scripts/events.handlebars packages/core/test/files/annotations.js packages/**/annotations.js -*.json *.md **/reset.scss **/_meta/_head.* **/_meta/_foot.* **/development-edition*/source/_patterns/** +/dist +/coverage diff --git a/.prettierrc b/.prettierrc index 3baced411..8fdaa2055 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,9 @@ { "singleQuote": true, - "endOfLine": "auto" + "endOfLine": "auto", + "trailingComma": "all", + "printWidth": 112, + "arrowParens": "always", + "useTabs": false, + "tabWidth": 2 } diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 6d97db0dc..dd2daaeea 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,3 +1,3 @@ { - "recommendations": ["editorconfig.editorconfig", "henrynguyen5-vsc.vsc-nvm"] + "recommendations": ["editorconfig.editorconfig", "henrynguyen5-vsc.vsc-nvm", "firsttris.vscode-jest-runner"] } diff --git a/jest.config.ts b/jest.config.ts new file mode 100644 index 000000000..2a738f774 --- /dev/null +++ b/jest.config.ts @@ -0,0 +1,5 @@ +import { getJestProjects } from '@nrwl/jest'; + +export default { + projects: getJestProjects(), +}; diff --git a/jest.preset.js b/jest.preset.js new file mode 100644 index 000000000..e6c8ebea0 --- /dev/null +++ b/jest.preset.js @@ -0,0 +1,3 @@ +const nxPreset = require('@nrwl/jest/preset').default; + +module.exports = { ...nxPreset }; diff --git a/lerna.json b/lerna.json index 82ccc8058..d107eeec4 100644 --- a/lerna.json +++ b/lerna.json @@ -2,17 +2,23 @@ "lerna": "4.0.0", "version": "6.0.1", "packages": [ - "packages/*" + "packages/cli", + "packages/core", + "packages/docs", + "packages/live-server", + "packages/plugin-tab", + "packages/starterkit-handlebars", + "packages/starterkit-twig-demo", + "packages/uikit-polyfills", + "packages/uikit-workshop", + "dist/packages/*" ], "command": { "init": { "exact": true }, "publish": { - "allowBranch": [ - "master", - "dev" - ], + "allowBranch": ["master", "dev"], "conventionalCommits": true, "gitReset": true, "includeMergedTags": true, @@ -23,16 +29,8 @@ "includeMergedTags": true } }, - "ignoreChanges": [ - "**/__fixtures__/**", - "**/__tests__/**", - "**/*.md", - "**/__snapshots__/**" - ], + "ignoreChanges": ["**/__fixtures__/**", "**/__tests__/**", "**/*.md", "**/__snapshots__/**"], "npmClient": "yarn", - "npmClientArgs": [ - "--ignore-optional", - "--registry=https://registry.npmjs.org/" - ], + "npmClientArgs": ["--ignore-optional", "--registry=https://registry.npmjs.org/"], "useWorkspaces": true } diff --git a/nx.json b/nx.json new file mode 100644 index 000000000..251d21f2e --- /dev/null +++ b/nx.json @@ -0,0 +1,43 @@ +{ + "$schema": "./node_modules/nx/schemas/nx-schema.json", + "npmScope": "pattern-lab", + "useDaemonProcess": false, + "affected": { + "defaultBase": "main" + }, + "tasksRunnerOptions": { + "default": { + "runner": "nx/tasks-runners/default", + "options": { + "cacheableOperations": ["build", "lint", "test", "e2e"] + } + } + }, + "targetDefaults": { + "build": { + "dependsOn": ["^build"], + "inputs": ["production", "^production"] + }, + "lint": { + "inputs": ["default", "{workspaceRoot}/.eslintrc.json"] + }, + "test": { + "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"] + } + }, + "namedInputs": { + "default": ["{projectRoot}/**/*", "sharedGlobals"], + "production": [ + "default", + "!{projectRoot}/.eslintrc.json", + "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)", + "!{projectRoot}/tsconfig.spec.json", + "!{projectRoot}/jest.config.[jt]s" + ], + "sharedGlobals": [] + }, + "workspaceLayout": { + "appsDir": "packages", + "libsDir": "packages" + } +} diff --git a/package.json b/package.json index 3a33784a5..fbe2cfe4f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,16 @@ { "workspaces": { "packages": [ - "packages/*" + "packages/cli", + "packages/core", + "packages/docs", + "packages/live-server", + "packages/plugin-tab", + "packages/starterkit-handlebars", + "packages/starterkit-twig-demo", + "packages/uikit-polyfills", + "packages/uikit-workshop", + "dist/packages/*" ], "nohoist": [ "@pattern-lab/engine-*", @@ -9,19 +18,6 @@ "**/@pattern-lab/uikit-workshop" ] }, - "dependencies": { - "@auto-it/released": "^10.27.0", - "@babel/plugin-proposal-decorators": "^7.13.5", - "@babel/plugin-syntax-jsx": "^7.12.13", - "auto": "^10.27.0", - "babel-eslint": "^10.0.2", - "eslint": "^6.1.0", - "eslint-config-prettier": "^6.0.0", - "eslint-plugin-prettier": "^3.1.0", - "lerna": "4.0.0", - "prettier": "^2.8.1", - "pretty-quick": "^3.1.3" - }, "repository": { "type": "git", "url": "git+https://github.com/pattern-lab/patternlab-node.git" @@ -40,7 +36,58 @@ "postpublish": "auto release", "preview:docs": "cd packages/docs && yarn production", "preview:hbs": "cd packages/development-edition-engine-handlebars && yarn pl:starterkit && yarn pl:build", - "prepare": "husky install" + "prepare": "husky install", + "build:engine": "nx run engine-handlebars:build", + "build:all": "nx run-many --target=build" + }, + "devDependencies": { + "@auto-it/all-contributors": "10.38.5", + "@auto-it/conventional-commits": "10.38.5", + "@auto-it/first-time-contributor": "10.38.5", + "@auto-it/released": "^10.27.0", + "@babel/plugin-proposal-decorators": "^7.13.5", + "@babel/plugin-syntax-jsx": "^7.12.13", + "@basalt/twig-renderer": "^2.1.0", + "@jscutlery/semver": "^2.29.3", + "@nrwl/eslint-plugin-nx": "15.6.3", + "@nrwl/jest": "15.6.3", + "@nrwl/js": "15.6.3", + "@nrwl/linter": "15.6.3", + "@nrwl/workspace": "15.6.3", + "@types/fs-extra": "^11.0.1", + "@types/glob": "^8.0.1", + "@types/jest": "28.1.1", + "@types/mustache": "^4.2.2", + "@types/node": "18.11.18", + "@types/nunjucks": "^3.2.1", + "@types/underscore": "^1.11.4", + "@typescript-eslint/eslint-plugin": "^5.36.1", + "@typescript-eslint/parser": "^5.36.1", + "auto": "^10.27.0", + "babel-eslint": "^10.0.2", + "eslint": "~8.15.0", + "eslint-config-prettier": "8.1.0", + "eslint-plugin-prettier": "^3.1.0", + "fs-extra": "^11.1.0", + "glob": "^8.1.0", + "gulp": "^4.0.2", + "handlebars": "4.7.7", + "husky": "^8.0.2", + "jest": "28.1.1", + "jest-environment-jsdom": "28.1.1", + "lerna": "4.0.0", + "liquidjs": "10.4.0", + "mustache": "4.2.0", + "nunjucks": "3.2.3", + "nx": "15.6.3", + "prettier": "^2.8.1", + "pretty-quick": "^3.1.3", + "ts-jest": "28.0.5", + "ts-node": "10.9.1", + "tslib": "^2.3.0", + "twing": "^5.1.2", + "typescript": "~4.8.2", + "underscore": "^1.13.6" }, "nyc": { "exclude": [ @@ -49,8 +96,5 @@ "packages/core/test", "packages/live-server" ] - }, - "devDependencies": { - "husky": "^8.0.2" } } diff --git a/packages/cli/.eslintrc.json b/packages/cli/.eslintrc.json new file mode 100644 index 000000000..9d9c0db55 --- /dev/null +++ b/packages/cli/.eslintrc.json @@ -0,0 +1,18 @@ +{ + "extends": ["../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["*.ts", "*.tsx"], + "rules": {} + }, + { + "files": ["*.js", "*.jsx"], + "rules": {} + } + ] +} diff --git a/packages/core/.eslintrc.js b/packages/core/.eslintrc.js deleted file mode 100644 index 5a2cc7f1e..000000000 --- a/packages/core/.eslintrc.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - extends: ['../../.eslintrc.js'], -}; diff --git a/packages/core/.eslintrc.json b/packages/core/.eslintrc.json new file mode 100644 index 000000000..9d9c0db55 --- /dev/null +++ b/packages/core/.eslintrc.json @@ -0,0 +1,18 @@ +{ + "extends": ["../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["*.ts", "*.tsx"], + "rules": {} + }, + { + "files": ["*.js", "*.jsx"], + "rules": {} + } + ] +} diff --git a/packages/core/package.json b/packages/core/package.json index 5e82b674c..78dc36436 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -4,8 +4,6 @@ "version": "6.0.1", "main": "./src/index.js", "dependencies": { - "@pattern-lab/engine-handlebars": "^6.0.0", - "@pattern-lab/engine-mustache": "^6.0.0", "@pattern-lab/live-server": "^6.0.0", "chalk": "4.1.0", "chokidar": "3.5.1", diff --git a/packages/create/.eslintrc.json b/packages/create/.eslintrc.json new file mode 100644 index 000000000..9d9c0db55 --- /dev/null +++ b/packages/create/.eslintrc.json @@ -0,0 +1,18 @@ +{ + "extends": ["../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["*.ts", "*.tsx"], + "rules": {} + }, + { + "files": ["*.js", "*.jsx"], + "rules": {} + } + ] +} diff --git a/packages/create/package.json b/packages/create/package.json index 48d67ba5a..2a8f2f2e1 100644 --- a/packages/create/package.json +++ b/packages/create/package.json @@ -4,7 +4,6 @@ "description": "", "bin": "index.js", "main": "index.js", - "scripts": {}, "dependencies": { "@pattern-lab/cli": "^6.0.1" }, diff --git a/packages/development-edition-engine-handlebars/.gitignore b/packages/development-edition-engine-handlebars/.gitignore index 534543a52..a5769f88e 100644 --- a/packages/development-edition-engine-handlebars/.gitignore +++ b/packages/development-edition-engine-handlebars/.gitignore @@ -7,4 +7,4 @@ Thumbs.db .idea/ public dependencyGraph.json -source/* +source diff --git a/packages/development-edition-engine-handlebars/source/_annotations/annotations.json b/packages/development-edition-engine-handlebars/source/_annotations/annotations.json index a0d0268f8..f469e90f1 100644 --- a/packages/development-edition-engine-handlebars/source/_annotations/annotations.json +++ b/packages/development-edition-engine-handlebars/source/_annotations/annotations.json @@ -1,3 +1,14 @@ { - "comments": [] + "comments": [ + { + "el": ".c-header", + "title": "Masthead", + "comment": "The main header of the site doesn't take up too much screen real estate in order to keep the focus on the core content." + }, + { + "el": ".c-logo", + "title": "Logo", + "comment": "The logo isn't an image but regular text, which ensures that the logo displays crisply even on high resolution displays." + } + ] } diff --git a/packages/development-edition-engine-handlebars/source/_data/data.json b/packages/development-edition-engine-handlebars/source/_data/data.json index 0967ef424..caf503f8f 100644 --- a/packages/development-edition-engine-handlebars/source/_data/data.json +++ b/packages/development-edition-engine-handlebars/source/_data/data.json @@ -1 +1,24 @@ -{} +{ + "title": "Soul Soles", + "company": { + "name": "Soul Soles", + "url": "http://soulsoles.com" + }, + "user": { + "name": "Thisisauser Withaverylongname", + "username": "thisisalongusernamenamename" + }, + "page": { + "title": "This is the page title", + "description": "This is the page description" + }, + "heading": "Heading ipsum dol (33 characters)", + "headline": "Heading ipsum dol (33 characters)", + "excerpt": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam", + "url": "#", + "htmlText": "

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam necessitatibus reprehenderit ipsum repellat quasi ratione sit possimus 🙂 eveniet, ea, ut mollitia repudiandae eligendi unde aperiam molestiae voluptatibus error. Dolorem, iure.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis. eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui.

This is a second-level heading

Aliquam erat volutpat. Mauris vulputate scelerisque feugiat. Cras a erat a diam venenatis aliquam. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor.

  1. Ordered list item
  2. Another ordered list item
  3. Yet another ordered list item

This is a third-level heading

Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui.

This is a linked heading

This is a blockquote. Eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo eget est blandit dignissim a eu ante. Morbi augue nulla Cite Source

This is a fourth-level heading

Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.

This is a fifth-level heading

Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel.

This is a sixth-level heading

Lorem ipsum dolor sit amet.

", + "cta": "Call to Action", + "sectionTitle": "Section Title", + "hero": true, + "promoBlock": true +} diff --git a/packages/development-edition-engine-handlebars/source/_meta/_head.hbs b/packages/development-edition-engine-handlebars/source/_meta/_head.hbs index 76899a54a..1567a4545 100644 --- a/packages/development-edition-engine-handlebars/source/_meta/_head.hbs +++ b/packages/development-edition-engine-handlebars/source/_meta/_head.hbs @@ -1,8 +1,8 @@ - + {{ title }} - + diff --git a/packages/development-edition-engine-handlebars/source/css/pattern-scaffolding.css b/packages/development-edition-engine-handlebars/source/css/pattern-scaffolding.css index f6c2da29d..63f05ff9a 100644 --- a/packages/development-edition-engine-handlebars/source/css/pattern-scaffolding.css +++ b/packages/development-edition-engine-handlebars/source/css/pattern-scaffolding.css @@ -3,12 +3,20 @@ * styles for grids, animations, color swatches, etc. * These styles will not be your production CSS. */ - #sg-patterns { -webkit-box-sizing: border-box !important; box-sizing: border-box !important; max-width: 100%; - padding: 0 0.5em; + padding: 0 1rem; +} + +.demo-animate { + background: #ddd; + padding: 1em; + margin-bottom: 1em; + text-align: center; + border-radius: 8px; + cursor: pointer; } .sg-colors { @@ -21,32 +29,282 @@ padding: 0 !important; margin: 0 !important; } + +@supports (display: grid) { + .sg-colors { + display: grid; + grid-gap: 10px; + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + } +} .sg-colors li { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; - margin: 0 0 0.5em 0.5em; - width: 14em; + padding: 0.3em; + margin: 0 0.5em 0.5em 0; + min-width: 5em; + max-width: 14em; + border: 1px solid #ddd; + border-radius: 8px; } .sg-swatch { - display: flex; - flex-direction: column; - height: 6em; + display: block; + height: 4em; margin-bottom: 0.3em; - padding: 0.5rem; + border-radius: 5px; } .sg-label { font-size: 90%; line-height: 1; - color: white; } -.sg-label__inverted { - color: black; +/** + * Icon grid + */ +.icon-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); +} + +/** + * Icon grid item + */ +.icon-grid__item { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 5.5rem; + height: 5.5rem; + background: #f5f5f5; + border: 1px solid #cccccd; + border-radius: 8px; + padding: 0.5rem; + margin: 0.5rem; +} + +/** + * Icon grid item title + */ +.icon-grid__item h3 { + font-size: 0.6rem; + margin-top: 1rem; +} + +/** +* Icon grid item svg +*/ +.icon-grid__item svg { + height: 16px; + width: 16px; +} + +.sg-pattern-example > footer > p { + display: none; +} + +/** +* For placeholder only block +* 1) Used for placeholder blocks for layouts +*/ +.fpo { + padding: 1rem; + background: #f5f5f5; + text-align: center; + font-weight: bold; + margin-bottom: 0.5rem; +} + +/** +* Dark for placeholder only block +*/ +.fpo-block--dark { + background: #808080; +} + +.sg-pattern-example small { + font-size: 10px; + display: block; + margin-top: 0.5rem; +} + +.sg-pattern-example small code { + font-size: inherit; + padding: 0.2em; } -.sg-label__top { - margin-bottom: auto; +/** + * Add height and overflow to two column fixed layout to show functionality only in style-guide example. + */ +.sg-pattern-example .l-page-layout--two-column-fixed { + height: 10rem; + overflow: auto; +} + +/** + * Add min-height of 0 to two column fixed to help with showing functionality only in style-guide example. + */ +.sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__secondary { + min-height: 0; } + +/** + * FPO block within two column fixed layout within secondary section + * 1) Width expands entire container at small screens + */ +.sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__secondary .fpo-block { + width: 100%; /* 1 */ +} + +/** + * FPO block within two column fixed layout within secondary section larger screens + * 1) Set height to 100% of viewport height + * 2) Set width = width of vertical header + */ +@media all and (min-width: 70em) { + .sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__secondary .fpo-block { + width: 20rem; /* 1 */ + height: 100vh; /* 2 */ + margin-bottom: 0; + } +} +/** + * Two column fixed layout within pattern example + * 1) Set height to height of placeholder content secondary section + * 2) Set overflow to auto so the secondary section stays fixed while the main section scrolls + */ +.sg-pattern-example .l-page-layout--two-column-fixed { + height: 18.3rem; + overflow: auto; +} + +/** + * Secondary section within pattern example and two-column fixed at larger screens + * 1) Position absolute to make this pattern similar to fixed vertical header + * 2) Height inherits so it doesn't span longer than the pattern window on "All" PL page + * 3) Float this left to get layout sections side by side within PL "View All" section + */ +@media all and (min-width: 70em) { + .sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__secondary { + position: absolute; /* 1 */ + height: inherit; /* 2 */ + float: left; /* 3 */ + } +} +/** + * Fpo block within pattern example, two column fixed, and secondary section + * 1) Make fpo block width of the container on small screens + */ +.sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__secondary .fpo-block { + width: 100%; /* 1 */ +} + +/** + * FPO Block Within pattern example, two column fixed, and secondary layout larger screens + * 1) Added width similar to style guide vertical header + * 2) Height inherits so it doesn't span longer than the pattern window on "All" PL page + */ +@media all and (min-width: 70em) { + .sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__secondary .fpo-block { + width: 20rem; /* 1 */ + height: inherit; /* 2 */ + } +} +/** + * Add height of main to get appearance of side bar staying fixed while main window scrolls. + */ +.sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__main { + height: 30rem; +} + +/** + * Add height of fpo block to equal height of main to help with scrolling main window/fixed sidebar effect. + */ +.sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__main .fpo-block { + height: 30rem; + margin-bottom: 0; +} + +/** + * Vertical header in pattern example at large screens + */ +@media all and (min-width: 70em) { + .sg-pattern-example .c-header--vertical { + max-width: 20rem; + } +} +#molecules-footer-nav .sg-pattern-example { + background: #041544; +} + +.sg-pattern .c-hero { + margin: 0; +} + +.sg-pattern .c-promo-block { + margin: 0; +} + +/*------------------------------------*\ + #VARIABLES +\*------------------------------------*/ +/** +* These variables are specific to the Pattern Lab shell and exist +* indepenedently of any project-specific styles +*/ +/*------------------------------------*\ + #ANNOTATIONS +\*------------------------------------*/ +/** + * Annotated elements styles + * 1) Annotation styles that appear inside the iframe + * 2) For elements in the DOM that have an annotation, we want to + * provide styles that help the user understand that annotations are available. + * We do this with some cursor helpers and a + */ +.pl-has-annotation { + cursor: help !important; + outline: 1px dotted #808080; + outline-offset: -4px; + transition: box-shadow 0.1s ease; +} +.pl-has-annotation a, +.pl-has-annotation input { + cursor: help !important; +} +.pl-has-annotation:hover { + box-shadow: 0 0 3px #808080; +} +.pl-has-annotation.active { + box-shadow: inset 0 0 6px #4d4c4c; + outline: 1px dotted #808080; + outline-offset: -1px; +} + +/** + * Annotation tooltip + * 1) Appears inside the iframe over any element that has an + * annotation attached to it. + */ +.pl-c-annotation-tip { + align-items: center; + justify-content: center; + width: 24px !important; + height: 24px !important; + margin-top: 6px !important; + margin-left: 6px !important; + border-radius: 50% !important; + background-color: #222 !important; + color: #fff !important; + font-size: 16px !important; + position: absolute; + z-index: 100; +} +.pl-c-annotation-tip:not([hidden]) { + display: flex; +} + +/*# sourceMappingURL=pattern-scaffolding.css.map */ diff --git a/packages/development-edition-engine-handlebars/source/css/style.css b/packages/development-edition-engine-handlebars/source/css/style.css index e69de29bb..81572428b 100644 --- a/packages/development-edition-engine-handlebars/source/css/style.css +++ b/packages/development-edition-engine-handlebars/source/css/style.css @@ -0,0 +1,2250 @@ +@charset "UTF-8"; +/*------------------------------------*\ + #TABLE OF CONTENTS +\*------------------------------------*/ +/** + * ABSTRACTS..............................Declarations of Sass variables & mixins + * BASE...................................Default element styles + * LAYOUT.................................Layout-specific styles + * COMPONENTS.............................Component styles + * UTILITIES..............................Utility classes + */ +/*------------------------------------*\ + #ABSTRACTS +\*------------------------------------*/ +/*------------------------------------*\ + #VARIABLES +\*------------------------------------*/ +/** + * CONTENTS + * + * COLORS + * Brand Colors...............Globally-available variables and config + * Neutral Colors.............Grayscale colors, including white and black + * Utility Colors.............Info, Warning, Error, Success + * + * TYPOGRAPHY + * Font Families..............The fonts used in the design system + * Sizing.....................Font sizing + * + * LAYOUT + * Max-widths.................Maximum layout container width + * + + * SPACING + * Spacing defaults...........Spacing between elements + * + * BORDERS + * Border Width...............Border thicknesses + * Border Radius..............Border radius definitions + * + * ANIMATION + * Animation Speed............Transition/animation speed variables + * Animation easing...........Easing variables + * + * BREAKPOINTS + * Breakpoints................Global breakpoint definitions + */ +/*------------------------------------*\ + #COLORS +\*------------------------------------*/ +/** + * Brand Colors + * 1) Brand=specific colors + */ +/** + * Neutral Colors + * 1) Neutral colors are grayscale values used throughout the UI + */ +/** + * Utility Colors + * 1) Utility colors are colors used to provide feedback, such as alert messages, + * form validation, etc. + */ +/*------------------------------------*\ + #TYPOGRAPHY +\*------------------------------------*/ +/** + * Font Family + */ +/** + * Font Sizing + */ +/** + * Line Height + */ +/*------------------------------------*\ + #LAYOUT +\*------------------------------------*/ +/** + * Max Width + */ +/*------------------------------------*\ + #SPACING +\*------------------------------------*/ +/** + * Spacing and offsets + * 1) Used to space grids and body padding + */ +/*------------------------------------*\ + #BORDERS +\*------------------------------------*/ +/** + * Border + */ +/** + * Border radius + */ +/*------------------------------------*\ + #ANIMATION +\*------------------------------------*/ +/** + * Transition Speed + */ +/** + * Transition Ease + */ +/*------------------------------------*\ + #BREAKPOINTS +\*------------------------------------*/ +/** + * Breakpoints used in media queries + * 1) These are not the only breakpoints used, but they provide a few defaults + */ +/*------------------------------------*\ + #MIXINS +\*------------------------------------*/ +/** + * Body Styles + * 1) Prevent Mobile Safari from scaling up text: https://blog.55minutes.com/2012/04/iphone-text-resizing/ + */ +/** + * XL Type Styles + */ +/** + * XL Heading Styles + */ +/** + * XL Heading Styles + */ +/** + * Large Heading Styles + */ +/** + * Medium 2 Heading Styles + */ +/** + * Medium Heading Styles + */ +/*------------------------------------*\ + #COLORS +\*------------------------------------*/ +/** + * In this file, we take the literal colors from our palette (defined in variables.scss) + * and define them against variables that we can utilise anywhere throughout the project. + */ +/*------------------------------------*\ + #GLOBAL TEXT COLOR +\*------------------------------------*/ +/** + * Body text and background colors + */ +/** + * Highlight colors + */ +/*------------------------------------*\ + #LINKS +\*------------------------------------*/ +/*------------------------------------*\ + #BUTTONS +\*------------------------------------*/ +/*------------------------------------*\ + #FORMS +\*------------------------------------*/ +/*------------------------------------*\ + #TYPOGRAPHY +\*------------------------------------*/ +/** + * In this file, we take the literal font sizes from our scale and define them + * against variables that we can utilise anywhere throughout the project. + */ +/*------------------------------------*\ + #BASE +\*------------------------------------*/ +/*------------------------------------*\ + #RESET +\*------------------------------------*/ +/** + * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/ + */ +* { + box-sizing: border-box; +} + +/** + * 1) Zero out margins and padding for elements + */ +html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, legend, label, table, header, footer, nav, section, figure { + margin: 0; + padding: 0; +} + +/** + * 1) Set HTML5 elements to display: block + */ +header, footer, nav, section, article, figure { + display: block; +} + +/*------------------------------------*\ + #FONT REFERENCES +\*------------------------------------*/ +/** + * Referencing SCSS mixins by @fontsource library + * Hardening references by – redundant, but specifically – declaring the variables previous to @include + */ +@font-face { + font-family: "Abel"; + font-style: normal; + font-display: swap; + font-weight: 400; + src: url("../fonts/abel-latin-400-normal.woff2") format("woff2"), url("../fonts/abel-all-400-normal.woff") format("woff"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +@font-face { + font-family: "Raleway"; + font-style: normal; + font-display: swap; + font-weight: 400; + src: url("../fonts/raleway-cyrillic-ext-400-normal.woff2") format("woff2"), url("../fonts/raleway-all-400-normal.woff") format("woff"); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +@font-face { + font-family: "Raleway"; + font-style: normal; + font-display: swap; + font-weight: 400; + src: url("../fonts/raleway-cyrillic-400-normal.woff2") format("woff2"), url("../fonts/raleway-all-400-normal.woff") format("woff"); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +@font-face { + font-family: "Raleway"; + font-style: normal; + font-display: swap; + font-weight: 400; + src: url("../fonts/raleway-vietnamese-400-normal.woff2") format("woff2"), url("../fonts/raleway-all-400-normal.woff") format("woff"); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +@font-face { + font-family: "Raleway"; + font-style: normal; + font-display: swap; + font-weight: 400; + src: url("../fonts/raleway-latin-ext-400-normal.woff2") format("woff2"), url("../fonts/raleway-all-400-normal.woff") format("woff"); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +@font-face { + font-family: "Raleway"; + font-style: normal; + font-display: swap; + font-weight: 400; + src: url("../fonts/raleway-latin-400-normal.woff2") format("woff2"), url("../fonts/raleway-all-400-normal.woff") format("woff"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +@font-face { + font-family: "Raleway"; + font-style: italic; + font-display: swap; + font-weight: 400; + src: url("../fonts/raleway-cyrillic-ext-400-italic.woff2") format("woff2"), url("../fonts/raleway-all-400-italic.woff") format("woff"); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +@font-face { + font-family: "Raleway"; + font-style: italic; + font-display: swap; + font-weight: 400; + src: url("../fonts/raleway-cyrillic-400-italic.woff2") format("woff2"), url("../fonts/raleway-all-400-italic.woff") format("woff"); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +@font-face { + font-family: "Raleway"; + font-style: italic; + font-display: swap; + font-weight: 400; + src: url("../fonts/raleway-vietnamese-400-italic.woff2") format("woff2"), url("../fonts/raleway-all-400-italic.woff") format("woff"); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +@font-face { + font-family: "Raleway"; + font-style: italic; + font-display: swap; + font-weight: 400; + src: url("../fonts/raleway-latin-ext-400-italic.woff2") format("woff2"), url("../fonts/raleway-all-400-italic.woff") format("woff"); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +@font-face { + font-family: "Raleway"; + font-style: italic; + font-display: swap; + font-weight: 400; + src: url("../fonts/raleway-latin-400-italic.woff2") format("woff2"), url("../fonts/raleway-all-400-italic.woff") format("woff"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +@font-face { + font-family: "Raleway"; + font-style: normal; + font-display: swap; + font-weight: 700; + src: url("../fonts/raleway-cyrillic-ext-700-normal.woff2") format("woff2"), url("../fonts/raleway-all-700-normal.woff") format("woff"); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +@font-face { + font-family: "Raleway"; + font-style: normal; + font-display: swap; + font-weight: 700; + src: url("../fonts/raleway-cyrillic-700-normal.woff2") format("woff2"), url("../fonts/raleway-all-700-normal.woff") format("woff"); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +@font-face { + font-family: "Raleway"; + font-style: normal; + font-display: swap; + font-weight: 700; + src: url("../fonts/raleway-vietnamese-700-normal.woff2") format("woff2"), url("../fonts/raleway-all-700-normal.woff") format("woff"); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +@font-face { + font-family: "Raleway"; + font-style: normal; + font-display: swap; + font-weight: 700; + src: url("../fonts/raleway-latin-ext-700-normal.woff2") format("woff2"), url("../fonts/raleway-all-700-normal.woff") format("woff"); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +@font-face { + font-family: "Raleway"; + font-style: normal; + font-display: swap; + font-weight: 700; + src: url("../fonts/raleway-latin-700-normal.woff2") format("woff2"), url("../fonts/raleway-all-700-normal.woff") format("woff"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/*------------------------------------*\ + #BODY +\*------------------------------------*/ +/** + * HTML base styles + * 1) Set the html element's height to at least 100% of the viewport. + * This is used to achieve a sticky footer + */ +html { + min-height: 100vh; /* 1 */ +} + +/** + * Body base styles + * 1) Set the body element's height to at least 100% of the viewport. + * This is used to achieve a sticky footer + */ +body { + min-height: 100vh; /* 1 */ + font-family: "Raleway", "HelveticaNeue", "Helvetica", "Arial", sans-serif; + font-size: 1rem; + line-height: 1.6; + -webkit-text-size-adjust: 100%; /* 1 */ + background-color: #fff; + color: #131313; +} + +/*------------------------------------*\ + #LINKS +\*------------------------------------*/ +/** + * Link base styles + */ +a { + color: #444; + text-decoration: none; + outline: 0; + transition: color 0.15s ease-out; +} +a:hover, a:focus { + color: #ba6333; +} +a:active { + color: #131313; +} + +/*------------------------------------*\ + #LISTS +\*------------------------------------*/ +/** + * 1) List base styles + */ +/** + * Remove list styles from unordered and ordered lists + */ +ol, ul { + list-style: none; +} + +/*------------------------------------*\ + #HEADINGS +\*------------------------------------*/ +h1, h2, h3, h4 { + font-family: "Abel", serif; + text-transform: uppercase; +} + +/** + * Heading 1 base styles + */ +h1 { + font-size: 3rem; + font-weight: normal; + line-height: 1.2; +} +@media all and (min-width: 47em) { + h1 { + font-size: 4rem; + } +} + +/** + * Heading 2 base styles + */ +h2 { + font-size: 1.2rem; + font-weight: normal; + line-height: 1.2; +} + +/** + * Heading 3 base styles + */ +h3 { + font-size: 1.2rem; + font-weight: normal; + line-height: 1.2; +} + +/** + * Heading 4 base styles + */ +h4 { + font-size: 1rem; + font-weight: normal; + line-height: 1.2; +} + +/*------------------------------------*\ + #FORMS +\*------------------------------------*/ +/** + * 1) Form element base styles + */ +/** + * Input placeholder text base styles + */ +::-webkit-input-placeholder { + color: #808080; +} + +::-moz-placeholder { + color: #808080; +} + +:-ms-input-placeholder { + color: #808080; +} + +/** + * Fieldset base styles + */ +fieldset { + border: 0; + padding: 0; + margin: 0; +} + +/** + * Legend base styles + */ +legend { + margin-bottom: 0.25rem; +} + +/** + * Label base styles + */ +label { + display: block; + padding-bottom: 0.25rem; + color: #131313; +} + +/** + * Add font size 100% of form element and margin 0 to these elements + */ +button, input, select, textarea { + font-family: inherit; + font-size: 1rem; + margin: 0; +} + +/** + * Text area base styles + */ +textarea { + resize: none; +} + +/** + * Input and text area base styles + */ +input, textarea { + width: 100%; + padding: 0.5rem; + border: 1px solid #444; + background: #fff; +} +input:focus, textarea:focus { + border-color: #131313; +} +input:disabled, textarea:disabled { + border-color: #eee; + background: #eee; + color: #808080; +} + +/** + * Remove webkit appearance styles from these elements + */ +input[type=text], input[type=search], input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration, input[type=url], input[type=number], textarea { + -webkit-appearance: none; +} + +/** + * Checkbox and radio button base styles + */ +input[type=checkbox], +input[type=radio] { + width: auto; + margin-right: 0.3rem; + border-color: #444; +} + +/** + * Search input base styles + */ +input[type=search] { + -webkit-appearance: none; + border-radius: 0; +} + +/** + * Select + * 1) Remove default styling + */ +select { + display: block; + font-size: 1rem; + width: 100%; + border: 1px solid #444; + border-radius: 0; + padding: 0.5rem; + height: 2rem; + background: #fff; + color: #131313; +} +select:focus { + border-color: #131313; +} + +/*------------------------------------*\ + #BUTTONS +\*------------------------------------*/ +/** + * Button and submit inputs reset + * 1) These should be styled using c-btn + */ +button { + cursor: pointer; +} + +/*------------------------------------*\ + #MAIN ELEMENT +\*------------------------------------*/ +/** + * Main element + */ +[role=main] { + display: block; + flex: 1 0 auto; +} + +/*------------------------------------*\ + #MEDIA +\*------------------------------------*/ +/** + * Responsive image styling + * 1) Allows for images to flex with varying screen size + */ +img { + max-width: 100%; + height: auto; +} + +/*------------------------------------*\ + #TEXT +\*------------------------------------*/ +/** + * Paragraph base styles + */ +p { + margin-bottom: 1rem; +} + +/** + * Blockquote base styles + */ +blockquote { + font-style: italic; + border-left: 1px solid #808080; + color: #808080; + padding-left: 1rem; + margin-bottom: 1rem; +} + +/** + * Horizontal rule base styles + */ +hr { + border: 0; + height: 1px; + background: #ddd; + margin: 1rem 0; +} + +/** + * Selection styles + */ +::-moz-selection { + color: #131313; + background: #ddd; /* Gecko Browsers */ +} + +::selection { + color: #131313; + background: #ddd; /* WebKit/Blink Browsers */ +} + +/** + * Code base styles + */ +code { + display: inline-block; + background: #f9f9f9; + border: 1px solid #ddd; + padding: 0.2rem 0.5rem; + line-height: 1.2; + font-size: 0.85rem; +} + +/** + * Preformatted text base styles + */ +pre { + background: #f9f9f9; + border: 1px solid #ddd; + font-size: 1rem; + padding: 1rem; + overflow-x: auto; + /** + * Remove border from code within preformatted text block + */ +} +pre code { + border: 0; +} + +/** + * Code with languages associated with them + * 1) Override Prism sysles for code blocks with language + */ +code[class*=language-], +pre[class*=language-] { + font-family: monospace !important; +} + +/*------------------------------------*\ + #TABLES +\*------------------------------------*/ +/** + * Table + */ +table { + border-collapse: collapse; + border-spacing: 0; + width: 100%; +} + +/** + * Table header cell + */ +th { + text-align: left; +} + +/** + * Table row + */ +tr { + vertical-align: top; +} + +/*------------------------------------*\ + #LAYOUT +\*------------------------------------*/ +/*------------------------------------*\ + #LAYOUT +\*------------------------------------*/ +/** + * Layout Container + * 1) Caps the width of the content to the maximum width + * and centers the container + */ +.l-container { + max-width: 80rem; + padding: 0 1rem; + margin: 0 auto; +} +@media all and (min-width: 60em) { + .l-container { + padding: 0 2rem; + } +} + +.l-container--narrow { + max-width: 45rem; +} + +/** + * + * 1) This caps the width of text passages + * to achieve a comfortable line length + */ +.l-linelength-container { + max-width: 36rem; +} + +.l-band { + background: #f9f9f9; + padding: 2rem 1rem; +} + +/** + * 2 column layout + */ +.l-page-layout--two-column { + display: flex; + flex-direction: column; +} +@media all and (min-width: 60em) { + .l-page-layout--two-column { + flex-direction: row; + } +} + +@media all and (min-width: 60em) { + .l-page-layout--two-column .l-page-layout__main { + width: 70%; + padding-right: 1rem; + } +} + +/** + * Sidebar + */ +@media all and (min-width: 60em) { + .l-page-layout--two-column .l-page-layout__secondary { + width: 30%; + margin-left: 2rem; + } +} +.l-page-layout--reversed .l-page-layout__secondary { + margin-bottom: 2rem; +} +@media all and (min-width: 60em) { + .l-page-layout--reversed .l-page-layout__secondary { + order: 1; + margin-bottom: 0; + } +} + +/*------------------------------------*\ + #GRID +\*------------------------------------*/ +/** + * Grid Container + */ +.l-grid { + display: flex; + flex-wrap: wrap; +} +@supports (display: grid) { + .l-grid { + display: grid; + grid-gap: 2rem; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + margin: 0; + } +} + +/** + * Grid Item + */ +.l-grid__item { + display: flex; +} + +/*------------------------------------*\ + #COMPONENTS +\*------------------------------------*/ +/*------------------------------------*\ + #BUTTONS +\*------------------------------------*/ +/** + * + * 1) Button or link that has functionality to it + */ +.c-btn { + display: inline-block; + border: 1px solid #131313; + background: #114689; + color: #fff; + line-height: 1; + padding: 1rem 2rem; + border: 0; + text-transform: uppercase; + text-align: center; + transition: all 0.15s ease-out; +} +.c-btn:hover, .c-btn:focus { + color: #fff; + background: #041544; +} + +.c-btn--bare { + background: none; + color: #114689; + border: 1px solid transparent; +} +.c-btn--bare:hover, .c-btn--bare:focus { + background: none; + color: #114689; + border-color: #114689; +} + +/* + * Inner container wrapper + * 1) Container is direct decendant of