From 73eab39555755f4829eb22327b18a221ecd0adae Mon Sep 17 00:00:00 2001 From: Christian Wiedemann Date: Sat, 8 Jan 2022 18:59:38 +0100 Subject: [PATCH 01/52] fix (ci): Fix Python issues. --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 41a3c722c..654369bba 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -5,7 +5,7 @@ aliases: working_directory: /tmp/storybook CYPRESS_CACHE_FOLDER: docker: - - image: circleci/node:14-browsers + - image: cimg/python:3.9.7-browsers jobs: install: From b274fb1241a11a0658fb6df3e796d786c0a9d0d8 Mon Sep 17 00:00:00 2001 From: Christian Wiedemann Date: Sun, 9 Jan 2022 11:09:19 +0100 Subject: [PATCH 02/52] v1.2.0-alpha.4 --- docs/package.json | 26 +++++------ examples/official-wingsuit/package.json | 10 ++-- lerna.json | 2 +- packages/cli/package.json | 4 +- packages/core/package.json | 6 +-- packages/pattern-react/package.json | 4 +- packages/pattern/package.json | 2 +- packages/storybook/package.json | 6 +-- presets/compression/package.json | 4 +- presets/examples/pages/package.json | 16 +++---- presets/imagemin/package.json | 2 +- presets/mdx/package.json | 4 +- presets/pages/package.json | 8 ++-- presets/postcss8/package.json | 2 +- presets/pwa/package.json | 2 +- presets/scss/package.json | 4 +- presets/tailwind/package.json | 4 +- presets/tailwind2/package.json | 4 +- starter-kits/bootstrap/package.json | 14 +++--- .../drimage/drimage-formatter.html.twig | 46 +++++++++++++++++++ starter-kits/tailwind/package.json | 14 +++--- starter-kits/vanilla-scss/package.json | 12 ++--- starter-kits/vanilla-tailwind/package.json | 14 +++--- 23 files changed, 128 insertions(+), 82 deletions(-) create mode 100644 starter-kits/tailwind/apps/drupal/templates/drimage/drimage-formatter.html.twig diff --git a/docs/package.json b/docs/package.json index 409fc007e..ae218e4d4 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,6 +1,6 @@ { "name": "@wingsuit-designsystem/docs", - "version": "1.2.0-alpha.3", + "version": "1.2.0-alpha.4", "description": "Wingsuit documentation.", "main": "", "private": true, @@ -49,18 +49,18 @@ "@types/react": "^16.9.35", "@types/react-dom": "^16.9.8", "@webpack-cli/serve": "^1.3.0", - "@wingsuit-designsystem/cli": "1.2.0-alpha.3", - "@wingsuit-designsystem/core": "1.2.0-alpha.3", - "@wingsuit-designsystem/pattern": "1.2.0-alpha.3", - "@wingsuit-designsystem/pattern-react": "1.2.0-alpha.3", - "@wingsuit-designsystem/preset-compression": "1.2.0-alpha.3", - "@wingsuit-designsystem/preset-imagemin": "1.2.0-alpha.3", - "@wingsuit-designsystem/preset-mdx": "1.2.0-alpha.3", - "@wingsuit-designsystem/preset-pages": "1.2.0-alpha.3", - "@wingsuit-designsystem/preset-postcss8": "1.2.0-alpha.3", - "@wingsuit-designsystem/preset-pwa": "1.2.0-alpha.3", - "@wingsuit-designsystem/preset-tailwind2": "1.2.0-alpha.3", - "@wingsuit-designsystem/storybook": "1.2.0-alpha.3", + "@wingsuit-designsystem/cli": "1.2.0-alpha.4", + "@wingsuit-designsystem/core": "1.2.0-alpha.4", + "@wingsuit-designsystem/pattern": "1.2.0-alpha.4", + "@wingsuit-designsystem/pattern-react": "1.2.0-alpha.4", + "@wingsuit-designsystem/preset-compression": "1.2.0-alpha.4", + "@wingsuit-designsystem/preset-imagemin": "1.2.0-alpha.4", + "@wingsuit-designsystem/preset-mdx": "1.2.0-alpha.4", + "@wingsuit-designsystem/preset-pages": "1.2.0-alpha.4", + "@wingsuit-designsystem/preset-postcss8": "1.2.0-alpha.4", + "@wingsuit-designsystem/preset-pwa": "1.2.0-alpha.4", + "@wingsuit-designsystem/preset-tailwind2": "1.2.0-alpha.4", + "@wingsuit-designsystem/storybook": "1.2.0-alpha.4", "autoprefixer": "^9.7.4", "browser-sync-webpack-plugin": "^2.3.0", "core-js": "^3.4.1", diff --git a/examples/official-wingsuit/package.json b/examples/official-wingsuit/package.json index a926b1014..9bef837b7 100644 --- a/examples/official-wingsuit/package.json +++ b/examples/official-wingsuit/package.json @@ -1,7 +1,7 @@ { "name": "official-wingsuit", "private": true, - "version": "1.2.0-alpha.3", + "version": "1.2.0-alpha.4", "description": "A design system with Storybook, Tailwind and Drupal", "main": "", "license": "GPL-2.0", @@ -34,10 +34,10 @@ "@storybook/linter-config": "^2.5.0", "@storybook/react": "^6.1.0", "@storybook/storybook-deployer": "^2.8.7", - "@wingsuit-designsystem/cli": "1.2.0-alpha.3", - "@wingsuit-designsystem/core": "1.2.0-alpha.3", - "@wingsuit-designsystem/pattern": "1.2.0-alpha.3", - "@wingsuit-designsystem/storybook": "1.2.0-alpha.3", + "@wingsuit-designsystem/cli": "1.2.0-alpha.4", + "@wingsuit-designsystem/core": "1.2.0-alpha.4", + "@wingsuit-designsystem/pattern": "1.2.0-alpha.4", + "@wingsuit-designsystem/storybook": "1.2.0-alpha.4", "autoprefixer": "^9.7.4", "core-js": "^3.4.1", "cross-env": "^6.0.3", diff --git a/lerna.json b/lerna.json index 2f8e2ccbe..554152f03 100644 --- a/lerna.json +++ b/lerna.json @@ -7,7 +7,7 @@ "examples/*", "starter-kits/*" ], - "version": "1.2.0-alpha.3", + "version": "1.2.0-alpha.4", "registry": "https://registry.npmjs.org", "npmClient": "yarn" } diff --git a/packages/cli/package.json b/packages/cli/package.json index 58a602953..933df881b 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "@wingsuit-designsystem/cli", - "version": "1.2.0-alpha.3", + "version": "1.2.0-alpha.4", "description": "The Wingsuit CLI", "homepage": "https://github.com/wingsuit-designsystem/wingsuit", "author": { @@ -45,7 +45,7 @@ "dependencies": { "@typescript-eslint/eslint-plugin": "^2.29.0", "@typescript-eslint/parser": "^2.29.0", - "@wingsuit-designsystem/core": "1.2.0-alpha.3", + "@wingsuit-designsystem/core": "1.2.0-alpha.4", "assign-deep": "^1.0.1", "ast-query": "^2.0.0", "babel-generator": "^6.26.1", diff --git a/packages/core/package.json b/packages/core/package.json index 7b575d1e7..18eebe8bb 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@wingsuit-designsystem/core", - "version": "1.2.0-alpha.3", + "version": "1.2.0-alpha.4", "description": "Wingsuit Core Design System.", "repository": { "type": "git", @@ -29,8 +29,8 @@ "@types/jest": "^25.2.1", "@types/node": "^13.13.0", "@types/webpack": "^4.41.12", - "@wingsuit-designsystem/pattern": "1.2.0-alpha.3", - "@wingsuit-designsystem/storybook": "1.2.0-alpha.3", + "@wingsuit-designsystem/pattern": "1.2.0-alpha.4", + "@wingsuit-designsystem/storybook": "1.2.0-alpha.4", "autoprefixer": "^9.7.4", "babel-core": "^7.0.0-bridge.0", "babel-jest": "^24.9.0", diff --git a/packages/pattern-react/package.json b/packages/pattern-react/package.json index 64619976d..a33e6739e 100644 --- a/packages/pattern-react/package.json +++ b/packages/pattern-react/package.json @@ -1,6 +1,6 @@ { "name": "@wingsuit-designsystem/pattern-react", - "version": "1.2.0-alpha.3", + "version": "1.2.0-alpha.4", "description": "Wingsuit Pattern for React.", "repository": { "type": "git", @@ -32,7 +32,7 @@ "dependencies": { "@types/react": "^16.9.35", "@types/react-dom": "^16.9.8", - "@wingsuit-designsystem/pattern": "1.2.0-alpha.3", + "@wingsuit-designsystem/pattern": "1.2.0-alpha.4", "polished": "^4.0.5", "prop-types": "^15.7.2", "react": "^16.13.1" diff --git a/packages/pattern/package.json b/packages/pattern/package.json index 8faaa43c1..3a4e8ae50 100644 --- a/packages/pattern/package.json +++ b/packages/pattern/package.json @@ -1,6 +1,6 @@ { "name": "@wingsuit-designsystem/pattern", - "version": "1.2.0-alpha.3", + "version": "1.2.0-alpha.4", "description": "Wingsuit Patterns.", "repository": { "type": "git", diff --git a/packages/storybook/package.json b/packages/storybook/package.json index fe96fdbaa..01d859886 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -1,6 +1,6 @@ { "name": "@wingsuit-designsystem/storybook", - "version": "1.2.0-alpha.3", + "version": "1.2.0-alpha.4", "description": "Wingsuit Storybook Integration.", "repository": { "type": "git", @@ -39,8 +39,8 @@ "@storybook/theming": "^6.4.0", "@types/react": "^16.9.35", "@types/react-dom": "^16.9.8", - "@wingsuit-designsystem/pattern": "1.2.0-alpha.3", - "@wingsuit-designsystem/pattern-react": "1.2.0-alpha.3", + "@wingsuit-designsystem/pattern": "1.2.0-alpha.4", + "@wingsuit-designsystem/pattern-react": "1.2.0-alpha.4", "polished": "^4.0.5", "prop-types": "^15.7.2", "react": "^16.13.1", diff --git a/presets/compression/package.json b/presets/compression/package.json index 0b8ae5301..157366601 100644 --- a/presets/compression/package.json +++ b/presets/compression/package.json @@ -1,6 +1,6 @@ { "name": "@wingsuit-designsystem/preset-compression", - "version": "1.2.0-alpha.3", + "version": "1.2.0-alpha.4", "description": "Wingsuit Compression preset.", "repository": { "type": "git", @@ -28,7 +28,7 @@ "homepage": "https://github.com/wingsuit-designsystem/wingsuit/tools#readme", "dependencies": { "@gfx/zopfli": "^1.0.15", - "@wingsuit-designsystem/core": "1.2.0-alpha.3", + "@wingsuit-designsystem/core": "1.2.0-alpha.4", "compression-webpack-plugin": "^6.1.1", "zlib": "^1.0.5" }, diff --git a/presets/examples/pages/package.json b/presets/examples/pages/package.json index a4e9f9957..34067bbd8 100644 --- a/presets/examples/pages/package.json +++ b/presets/examples/pages/package.json @@ -1,6 +1,6 @@ { "name": "@wingsuit-designsystem/examples-pages", - "version": "1.2.0-alpha.3", + "version": "1.2.0-alpha.4", "description": "A design system with Storybook, Tailwind and Drupal", "main": "", "private": true, @@ -36,13 +36,13 @@ "@tailwindcss/jit": "^0.1.18", "@types/react": "^16.9.35", "@types/react-dom": "^16.9.8", - "@wingsuit-designsystem/cli": "1.2.0-alpha.3", - "@wingsuit-designsystem/core": "1.2.0-alpha.3", - "@wingsuit-designsystem/pattern": "1.2.0-alpha.3", - "@wingsuit-designsystem/preset-pages": "1.2.0-alpha.3", - "@wingsuit-designsystem/preset-postcss8": "1.2.0-alpha.3", - "@wingsuit-designsystem/preset-tailwind2": "1.2.0-alpha.3", - "@wingsuit-designsystem/storybook": "1.2.0-alpha.3", + "@wingsuit-designsystem/cli": "1.2.0-alpha.4", + "@wingsuit-designsystem/core": "1.2.0-alpha.4", + "@wingsuit-designsystem/pattern": "1.2.0-alpha.4", + "@wingsuit-designsystem/preset-pages": "1.2.0-alpha.4", + "@wingsuit-designsystem/preset-postcss8": "1.2.0-alpha.4", + "@wingsuit-designsystem/preset-tailwind2": "1.2.0-alpha.4", + "@wingsuit-designsystem/storybook": "1.2.0-alpha.4", "autoprefixer": "^9.7.4", "core-js": "^3.4.1", "cross-env": "^6.0.3", diff --git a/presets/imagemin/package.json b/presets/imagemin/package.json index ebd9655cd..e47accb94 100644 --- a/presets/imagemin/package.json +++ b/presets/imagemin/package.json @@ -1,6 +1,6 @@ { "name": "@wingsuit-designsystem/preset-imagemin", - "version": "1.2.0-alpha.3", + "version": "1.2.0-alpha.4", "description": "Wingsuit image optimization preset.", "repository": { "type": "git", diff --git a/presets/mdx/package.json b/presets/mdx/package.json index 1c264ee81..75b0fbd99 100644 --- a/presets/mdx/package.json +++ b/presets/mdx/package.json @@ -1,6 +1,6 @@ { "name": "@wingsuit-designsystem/preset-mdx", - "version": "1.2.0-alpha.3", + "version": "1.2.0-alpha.4", "description": "Wingsuit Mdx support.", "repository": { "type": "git", @@ -28,7 +28,7 @@ "homepage": "https://github.com/wingsuit-designsystem/wingsuit/tools#readme", "dependencies": { "@mdx-js/loader": "^1.6.22", - "@wingsuit-designsystem/core": "1.2.0-alpha.3", + "@wingsuit-designsystem/core": "1.2.0-alpha.4", "remark-prism": "^1.3.6" }, "scripts": { diff --git a/presets/pages/package.json b/presets/pages/package.json index 388dd7a49..d70f29ee1 100644 --- a/presets/pages/package.json +++ b/presets/pages/package.json @@ -1,6 +1,6 @@ { "name": "@wingsuit-designsystem/preset-pages", - "version": "1.2.0-alpha.3", + "version": "1.2.0-alpha.4", "description": "Wingsuit Pages.", "repository": { "type": "git", @@ -34,9 +34,9 @@ }, "gitHead": "c8f79243b1d0a1dace0bf3b8edcd45f23271befc", "dependencies": { - "@wingsuit-designsystem/core": "1.2.0-alpha.3", - "@wingsuit-designsystem/pattern": "1.2.0-alpha.3", - "@wingsuit-designsystem/pattern-react": "1.2.0-alpha.3", + "@wingsuit-designsystem/core": "1.2.0-alpha.4", + "@wingsuit-designsystem/pattern": "1.2.0-alpha.4", + "@wingsuit-designsystem/pattern-react": "1.2.0-alpha.4", "browser-sync": "^2.26.14", "browser-sync-webpack-plugin": "^2.3.0", "js-yaml": "^4.0.0", diff --git a/presets/postcss8/package.json b/presets/postcss8/package.json index 68161331c..d91817483 100644 --- a/presets/postcss8/package.json +++ b/presets/postcss8/package.json @@ -1,6 +1,6 @@ { "name": "@wingsuit-designsystem/preset-postcss8", - "version": "1.2.0-alpha.3", + "version": "1.2.0-alpha.4", "description": "Wingsuit PostCss 8 support.", "repository": { "type": "git", diff --git a/presets/pwa/package.json b/presets/pwa/package.json index cae0a156e..e98272cf1 100644 --- a/presets/pwa/package.json +++ b/presets/pwa/package.json @@ -1,6 +1,6 @@ { "name": "@wingsuit-designsystem/preset-pwa", - "version": "1.2.0-alpha.3", + "version": "1.2.0-alpha.4", "description": "Wingsuit automatically generated favicons and progressive webapp enhancements preset.", "repository": { "type": "git", diff --git a/presets/scss/package.json b/presets/scss/package.json index 5de1724b7..48aa79a6c 100644 --- a/presets/scss/package.json +++ b/presets/scss/package.json @@ -1,6 +1,6 @@ { "name": "@wingsuit-designsystem/preset-scss", - "version": "1.2.0-alpha.3", + "version": "1.2.0-alpha.4", "description": "Wingsuit SCSS preset.", "repository": { "type": "git", @@ -27,7 +27,7 @@ }, "homepage": "https://github.com/wingsuit-designsystem/wingsuit/tools#readme", "dependencies": { - "@wingsuit-designsystem/core": "1.2.0-alpha.3", + "@wingsuit-designsystem/core": "1.2.0-alpha.4", "glob": "^7.1.6", "mini-css-extract-plugin": "^1.3.1", "node-sass": "^5.0.0", diff --git a/presets/tailwind/package.json b/presets/tailwind/package.json index 2e52761d0..08ed57268 100644 --- a/presets/tailwind/package.json +++ b/presets/tailwind/package.json @@ -1,6 +1,6 @@ { "name": "@wingsuit-designsystem/preset-tailwind", - "version": "1.2.0-alpha.3", + "version": "1.2.0-alpha.4", "description": "Wingsuit TailwindCSS preset.", "repository": { "type": "git", @@ -27,7 +27,7 @@ }, "homepage": "https://github.com/wingsuit-designsystem/wingsuit/tools#readme", "dependencies": { - "@wingsuit-designsystem/core": "1.2.0-alpha.3", + "@wingsuit-designsystem/core": "1.2.0-alpha.4", "fs-extra": "^9.0.0", "json-diff": "^0.7.1", "tailwindcss": "^1.4.6" diff --git a/presets/tailwind2/package.json b/presets/tailwind2/package.json index c231551b9..863dffa76 100644 --- a/presets/tailwind2/package.json +++ b/presets/tailwind2/package.json @@ -1,6 +1,6 @@ { "name": "@wingsuit-designsystem/preset-tailwind2", - "version": "1.2.0-alpha.3", + "version": "1.2.0-alpha.4", "description": "Wingsuit TailwindCSS 2 preset.", "repository": { "type": "git", @@ -27,7 +27,7 @@ }, "homepage": "https://github.com/wingsuit-designsystem/wingsuit/tools#readme", "dependencies": { - "@wingsuit-designsystem/core": "1.2.0-alpha.3", + "@wingsuit-designsystem/core": "1.2.0-alpha.4", "fs-extra": "^9.0.0", "json-diff": "^0.7.1", "tailwindcss": "^2.0.1-compat" diff --git a/starter-kits/bootstrap/package.json b/starter-kits/bootstrap/package.json index 9f597e01c..72dd01daf 100644 --- a/starter-kits/bootstrap/package.json +++ b/starter-kits/bootstrap/package.json @@ -1,6 +1,6 @@ { "name": "@wingsuit-designsystem/starter-kit-bootstrap", - "version": "1.2.0-alpha.3", + "version": "1.2.0-alpha.4", "description": "Wingsuit Starter-Kit for Bootstap 4", "main": "", "license": "GPL-2.0", @@ -45,12 +45,12 @@ "@storybook/react": "^6.3.0", "@types/react": "^16.9.35", "@types/react-dom": "^16.9.8", - "@wingsuit-designsystem/cli": "1.2.0-alpha.3", - "@wingsuit-designsystem/core": "1.2.0-alpha.3", - "@wingsuit-designsystem/pattern": "1.2.0-alpha.3", - "@wingsuit-designsystem/preset-postcss8": "1.2.0-alpha.3", - "@wingsuit-designsystem/preset-scss": "1.2.0-alpha.3", - "@wingsuit-designsystem/storybook": "1.2.0-alpha.3", + "@wingsuit-designsystem/cli": "1.2.0-alpha.4", + "@wingsuit-designsystem/core": "1.2.0-alpha.4", + "@wingsuit-designsystem/pattern": "1.2.0-alpha.4", + "@wingsuit-designsystem/preset-postcss8": "1.2.0-alpha.4", + "@wingsuit-designsystem/preset-scss": "1.2.0-alpha.4", + "@wingsuit-designsystem/storybook": "1.2.0-alpha.4", "autoprefixer": "^9.7.4", "core-js": "^3.4.1", "cross-env": "^6.0.3", diff --git a/starter-kits/tailwind/apps/drupal/templates/drimage/drimage-formatter.html.twig b/starter-kits/tailwind/apps/drupal/templates/drimage/drimage-formatter.html.twig new file mode 100644 index 000000000..0d81dc658 --- /dev/null +++ b/starter-kits/tailwind/apps/drupal/templates/drimage/drimage-formatter.html.twig @@ -0,0 +1,46 @@ +{# +/** + * @file + * Default theme implementation to display a dynamic responsive image + * + * Available variables: + * - url: An optional URL the image can be linked to. + * - width: The original width of the image. + * - height: The original height of the image. + * - alt: The alt text for the image. + * - item_attributes: attributes for the wrapper + * - data: json encoded drimage data object + * + * @see template_preprocess_drimage_formatter() + * + * @ingroup themeable + */ +#} + +{{ attach_library('drimage/drimage') }} +
+ {% if data.media_preview %} + {{ alt }} + {% elseif url %} + {% spaceless %} + + + {% if modern_image_format is not empty %} + + {% endif %} + {{ alt }} + + + {% endspaceless %} + {% else %} + + {% if modern_image_format is not empty %} + + {% endif %} + {{ alt }} + + {% endif %} +
+ diff --git a/starter-kits/tailwind/package.json b/starter-kits/tailwind/package.json index 2417723a0..598ffbba6 100644 --- a/starter-kits/tailwind/package.json +++ b/starter-kits/tailwind/package.json @@ -1,6 +1,6 @@ { "name": "@wingsuit-designsystem/starter-kit-tailwind", - "version": "1.2.0-alpha.3", + "version": "1.2.0-alpha.4", "description": "A design system with Storybook, Tailwind and Drupal", "main": "", "private": true, @@ -53,12 +53,12 @@ "@storybook/storybook-deployer": "^2.8.7", "@types/react": "^16.9.35", "@types/react-dom": "^16.9.8", - "@wingsuit-designsystem/cli": "1.2.0-alpha.3", - "@wingsuit-designsystem/core": "1.2.0-alpha.3", - "@wingsuit-designsystem/pattern": "1.2.0-alpha.3", - "@wingsuit-designsystem/preset-postcss8": "1.2.0-alpha.3", - "@wingsuit-designsystem/preset-tailwind2": "1.2.0-alpha.3", - "@wingsuit-designsystem/storybook": "1.2.0-alpha.3", + "@wingsuit-designsystem/cli": "1.2.0-alpha.4", + "@wingsuit-designsystem/core": "1.2.0-alpha.4", + "@wingsuit-designsystem/pattern": "1.2.0-alpha.4", + "@wingsuit-designsystem/preset-postcss8": "1.2.0-alpha.4", + "@wingsuit-designsystem/preset-tailwind2": "1.2.0-alpha.4", + "@wingsuit-designsystem/storybook": "1.2.0-alpha.4", "autoprefixer": "^10.4.1", "babel-loader": "^8.2.3", "core-js": "^3.4.1", diff --git a/starter-kits/vanilla-scss/package.json b/starter-kits/vanilla-scss/package.json index 52fd32a6f..3bb309a75 100644 --- a/starter-kits/vanilla-scss/package.json +++ b/starter-kits/vanilla-scss/package.json @@ -1,6 +1,6 @@ { "name": "@wingsuit-designsystem/starter-kit-vanilla-scss", - "version": "1.2.0-alpha.3", + "version": "1.2.0-alpha.4", "description": "Vanilla Wingsuit Starter-Kit", "main": "", "license": "GPL-2.0", @@ -44,11 +44,11 @@ "@storybook/react": "^6.0.0", "@types/react": "^16.9.35", "@types/react-dom": "^16.9.8", - "@wingsuit-designsystem/cli": "1.2.0-alpha.3", - "@wingsuit-designsystem/core": "1.2.0-alpha.3", - "@wingsuit-designsystem/pattern": "1.2.0-alpha.3", - "@wingsuit-designsystem/preset-scss": "1.2.0-alpha.3", - "@wingsuit-designsystem/storybook": "1.2.0-alpha.3", + "@wingsuit-designsystem/cli": "1.2.0-alpha.4", + "@wingsuit-designsystem/core": "1.2.0-alpha.4", + "@wingsuit-designsystem/pattern": "1.2.0-alpha.4", + "@wingsuit-designsystem/preset-scss": "1.2.0-alpha.4", + "@wingsuit-designsystem/storybook": "1.2.0-alpha.4", "autoprefixer": "^9.7.4", "core-js": "^3.4.1", "cross-env": "^6.0.3", diff --git a/starter-kits/vanilla-tailwind/package.json b/starter-kits/vanilla-tailwind/package.json index 13efa3d0d..36bacf7b2 100644 --- a/starter-kits/vanilla-tailwind/package.json +++ b/starter-kits/vanilla-tailwind/package.json @@ -1,6 +1,6 @@ { "name": "@wingsuit-designsystem/starter-kit-vanilla-tailwind", - "version": "1.2.0-alpha.3", + "version": "1.2.0-alpha.4", "description": "A design system with Storybook and Tailwind", "main": "", "private": true, @@ -51,12 +51,12 @@ "@storybook/storybook-deployer": "^2.8.7", "@types/react": "^16.9.35", "@types/react-dom": "^16.9.8", - "@wingsuit-designsystem/cli": "1.2.0-alpha.3", - "@wingsuit-designsystem/core": "1.2.0-alpha.3", - "@wingsuit-designsystem/pattern": "1.2.0-alpha.3", - "@wingsuit-designsystem/preset-postcss8": "1.2.0-alpha.3", - "@wingsuit-designsystem/preset-tailwind2": "1.2.0-alpha.3", - "@wingsuit-designsystem/storybook": "1.2.0-alpha.3", + "@wingsuit-designsystem/cli": "1.2.0-alpha.4", + "@wingsuit-designsystem/core": "1.2.0-alpha.4", + "@wingsuit-designsystem/pattern": "1.2.0-alpha.4", + "@wingsuit-designsystem/preset-postcss8": "1.2.0-alpha.4", + "@wingsuit-designsystem/preset-tailwind2": "1.2.0-alpha.4", + "@wingsuit-designsystem/storybook": "1.2.0-alpha.4", "autoprefixer": "^10.4.0", "core-js": "^3.4.1", "cross-env": "^6.0.3", From 0b6a53441a7d2cf8980a0022754d76366175e202 Mon Sep 17 00:00:00 2001 From: Christian Wiedemann Date: Sun, 9 Jan 2022 21:13:47 +0100 Subject: [PATCH 03/52] feature (docs): Add block for docs preview page --- .circleci/config.yml | 4 ++-- packages/cli/src/startApps.ts | 6 +++--- packages/core/src/server/PresetManager.ts | 2 +- packages/storybook/src/index.tsx | 11 ++++++++++- starter-kits/tailwind/README.md | 2 -- .../tailwind/apps/drupal/includes/layout.theme.inc | 3 ++- .../apps/drupal/includes/layout_builder.theme.inc | 6 +++--- .../tailwind/apps/drupal/includes/link.theme.inc | 4 ++-- .../tailwind/apps/drupal/includes/misc.theme.inc | 1 - .../apps/drupal/templates/content/media.html.twig | 12 +++--------- .../templates/drimage/drimage-formatter.html.twig | 2 +- .../apps/drupal/templates/layout/page.html.twig | 2 +- .../01-atoms/placeholder/_placeholder-macro.twig | 6 +++++- .../01-atoms/placeholder/placeholder.stories.jsx | 12 ++++++------ .../01-atoms/placeholder/placeholder.wingsuit.yml | 10 +--------- .../patterns/02-molecules/avatar/avatar.twig | 6 +++--- .../02-molecules/avatar/avatar.wingsuit.yml | 10 +++++++--- .../default/patterns/02-molecules/card/card.twig | 14 ++++++++++++-- .../patterns/02-molecules/card/card.wingsuit.yml | 11 +++++++---- .../patterns/03-organisms/container/container.twig | 2 +- .../patterns/03-organisms/footer/footer.twig | 2 +- .../section_slider/section_slider.twig | 2 +- 22 files changed, 72 insertions(+), 58 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 654369bba..b7bf93c4f 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -93,7 +93,7 @@ jobs: - .verdaccio-cache init-e2e: docker: - - image: cypress/included:4.5.0 + - image: cypress/included:4.12.0 environment: TERM: xterm working_directory: /tmp/storybook @@ -154,7 +154,7 @@ jobs: e2e: working_directory: /tmp/storybook docker: - - image: cypress/included:4.7.0 + - image: cypress/included:4.12.0 environment: TERM: xterm steps: diff --git a/packages/cli/src/startApps.ts b/packages/cli/src/startApps.ts index a75d1cb87..e3b0507c2 100644 --- a/packages/cli/src/startApps.ts +++ b/packages/cli/src/startApps.ts @@ -26,15 +26,15 @@ export default function (options, environment) { const appName = await getAppName(); try { const appConfig = resolveConfig(appName, environment); - const console = - options.docs === false + const consoleCommand = + options.docs !== true ? appConfig.startup() : `export STORYBOOK_DOCS=true && ${appConfig.startup()} --docs`; version({}); logger.info(''); logger.info(`Starting Wingsuit app "${appName}"...`); logger.info(''); - const command = spawn(console, [], { shell: true, stdio: 'inherit' }); + const command = spawn(consoleCommand, [], { shell: true, stdio: 'inherit' }); command.on('close', (code) => { logger.log(`${code}`); }); diff --git a/packages/core/src/server/PresetManager.ts b/packages/core/src/server/PresetManager.ts index ef901d0f8..3c0b37f36 100644 --- a/packages/core/src/server/PresetManager.ts +++ b/packages/core/src/server/PresetManager.ts @@ -18,7 +18,7 @@ const twing = require('./presets/twing'); const svg = require('./presets/svg'); const assetsVideos = require('./presets/assetsVideos'); -const defaultPresets: {} = { +const defaultPresets:any = { css, babel, assets, diff --git a/packages/storybook/src/index.tsx b/packages/storybook/src/index.tsx index c7d2266ec..ac183f858 100644 --- a/packages/storybook/src/index.tsx +++ b/packages/storybook/src/index.tsx @@ -1,7 +1,14 @@ import React from 'react'; import { storage, renderer, Pattern, IRenderer } from '@wingsuit-designsystem/pattern'; import { configure as storybookConfigure, storiesOf } from '@storybook/react'; -import { Title, Subtitle, DocsStory, ArgsTable, CURRENT_SELECTION } from '@storybook/addon-docs'; +import { + Title, + Subtitle, + DocsStory, + Stories, + ArgsTable, + CURRENT_SELECTION, +} from '@storybook/addon-docs'; import TwigAttribute from '@wingsuit-designsystem/pattern/dist/TwigAttribute'; import '@storybook/addon-docs/register'; import twig from 'react-syntax-highlighter/dist/cjs/languages/prism/markup'; @@ -241,6 +248,7 @@ function getStories(pattern: Pattern, module) { const variant = pattern.getVariant(variantKey); const argTypes = getArgTypes(variant); const twigFile = storage.findTwigById(variant.getPattern().getId()); + const stories = process.env.STORYBOOK_DOCS === 'true' ? : null; let parameters = { argTypes, docs: { @@ -256,6 +264,7 @@ function getStories(pattern: Pattern, module) { + {stories} ), diff --git a/starter-kits/tailwind/README.md b/starter-kits/tailwind/README.md index ccede8f07..c07162d4f 100644 --- a/starter-kits/tailwind/README.md +++ b/starter-kits/tailwind/README.md @@ -34,5 +34,3 @@ To start drupal ```bash yarn dev:drupal ``` - - diff --git a/starter-kits/tailwind/apps/drupal/includes/layout.theme.inc b/starter-kits/tailwind/apps/drupal/includes/layout.theme.inc index 35d15ba49..2c3801927 100644 --- a/starter-kits/tailwind/apps/drupal/includes/layout.theme.inc +++ b/starter-kits/tailwind/apps/drupal/includes/layout.theme.inc @@ -16,7 +16,8 @@ function wingsuit_preprocess_page(&$variables) { if (wingsuit_is_layout_builder()) { $variables['is_layout_builder'] = TRUE; - } else { + } + else { $variables['is_layout_builder'] = FALSE; } diff --git a/starter-kits/tailwind/apps/drupal/includes/layout_builder.theme.inc b/starter-kits/tailwind/apps/drupal/includes/layout_builder.theme.inc index a9fdf5989..bdd6be741 100644 --- a/starter-kits/tailwind/apps/drupal/includes/layout_builder.theme.inc +++ b/starter-kits/tailwind/apps/drupal/includes/layout_builder.theme.inc @@ -5,6 +5,7 @@ * Functions to support theming layout builder in Wingsuit theme. */ +use Drupal\node\NodeInterface; /** * Checks if current route is a layout builder route. @@ -12,7 +13,7 @@ * @return bool * True if it is a layout builder route. */ -function wingsuit_is_layout_builder(){ +function wingsuit_is_layout_builder() { $route_name = \Drupal::routeMatch()->getRouteName(); if (preg_match('/^(layout_builder\.([^.]+\.)?)/', $route_name)) { return TRUE; @@ -27,8 +28,7 @@ function wingsuit_is_layout_builder(){ */ function wingsuit_theme_suggestions_page_alter(array &$suggestions, array $variables) { $node = \Drupal::routeMatch()->getParameter('node'); - if ($node !== NULL && $node instanceof \Drupal\node\NodeInterface) { + if ($node !== NULL && $node instanceof NodeInterface) { $suggestions[] = 'page__' . $node->getEntityTypeId() . '__' . $node->bundle(); } } - diff --git a/starter-kits/tailwind/apps/drupal/includes/link.theme.inc b/starter-kits/tailwind/apps/drupal/includes/link.theme.inc index b47a13d1d..178dd3ee5 100644 --- a/starter-kits/tailwind/apps/drupal/includes/link.theme.inc +++ b/starter-kits/tailwind/apps/drupal/includes/link.theme.inc @@ -18,7 +18,7 @@ function wingsuit_link_attributes_plugin_alter(array &$plugins) { 'type' => 'select', 'options' => [ 'default' => 'Default', - 'outline' => 'Outline' - ] + 'outline' => 'Outline', + ], ]; } diff --git a/starter-kits/tailwind/apps/drupal/includes/misc.theme.inc b/starter-kits/tailwind/apps/drupal/includes/misc.theme.inc index 2ff4839a6..ef828ecb8 100644 --- a/starter-kits/tailwind/apps/drupal/includes/misc.theme.inc +++ b/starter-kits/tailwind/apps/drupal/includes/misc.theme.inc @@ -4,4 +4,3 @@ * @file * Functions to support theming miscellaneous things the Wingsuit theme. */ - diff --git a/starter-kits/tailwind/apps/drupal/templates/content/media.html.twig b/starter-kits/tailwind/apps/drupal/templates/content/media.html.twig index 946b8fd48..8924a060d 100644 --- a/starter-kits/tailwind/apps/drupal/templates/content/media.html.twig +++ b/starter-kits/tailwind/apps/drupal/templates/content/media.html.twig @@ -12,13 +12,7 @@ * @ingroup themeable */ #} -{% if title_suffix is not empty or attributes['data-quickedit-entity-id'] %} - - {{ title_suffix }} -{% endif %} - {% if content %} - {{ content }} - {% endif %} -{% if title_suffix is not empty or attributes['data-quickedit-entity-id'] %} - + +{% if content %} + {{ content }} {% endif %} diff --git a/starter-kits/tailwind/apps/drupal/templates/drimage/drimage-formatter.html.twig b/starter-kits/tailwind/apps/drupal/templates/drimage/drimage-formatter.html.twig index 0d81dc658..93e6531d6 100644 --- a/starter-kits/tailwind/apps/drupal/templates/drimage/drimage-formatter.html.twig +++ b/starter-kits/tailwind/apps/drupal/templates/drimage/drimage-formatter.html.twig @@ -16,7 +16,7 @@ * @ingroup themeable */ #} - +{% set item_attributes = data.image_handling == 'background' ? item_attributes.addClass('absolute w-full h-full') : item_attributes %} {{ attach_library('drimage/drimage') }}
{% if data.media_preview %} diff --git a/starter-kits/tailwind/apps/drupal/templates/layout/page.html.twig b/starter-kits/tailwind/apps/drupal/templates/layout/page.html.twig index 89a016b67..ab3de4c31 100755 --- a/starter-kits/tailwind/apps/drupal/templates/layout/page.html.twig +++ b/starter-kits/tailwind/apps/drupal/templates/layout/page.html.twig @@ -54,7 +54,7 @@ {% embed "@templates/site-container.twig" with { primary_menu: page.primary_menu, language_select: page.language_switcher, - footer_menu: page.footer, + footer_menu: page.footer_menu, highlighted: page.highlighted } %} {% block main %} diff --git a/starter-kits/tailwind/source/default/patterns/01-atoms/placeholder/_placeholder-macro.twig b/starter-kits/tailwind/source/default/patterns/01-atoms/placeholder/_placeholder-macro.twig index 5383bab4c..1b5b42d9c 100644 --- a/starter-kits/tailwind/source/default/patterns/01-atoms/placeholder/_placeholder-macro.twig +++ b/starter-kits/tailwind/source/default/patterns/01-atoms/placeholder/_placeholder-macro.twig @@ -66,8 +66,12 @@ media="{{ breakpoints[breakpoint_name].mediaQuery }}"> {% endif %} {% endfor %} + {% if image_styles[image_style.style] is not empty %} MDN + {% else %} + No image style {{ image_style.style }} found! + {% endif %} {% endif %} {% endif %} @@ -78,7 +82,7 @@ {% set imageConfig = pattern_configuration('placeholder', 'background', 'image_config') %} {% set image_styles = imageConfig.styles %} {% if image_styles[style] is not empty %} -
+
{% else %} {{ style }} not found. diff --git a/starter-kits/tailwind/source/default/patterns/01-atoms/placeholder/placeholder.stories.jsx b/starter-kits/tailwind/source/default/patterns/01-atoms/placeholder/placeholder.stories.jsx index 10eb96d16..4ac30756d 100644 --- a/starter-kits/tailwind/source/default/patterns/01-atoms/placeholder/placeholder.stories.jsx +++ b/starter-kits/tailwind/source/default/patterns/01-atoms/placeholder/placeholder.stories.jsx @@ -8,12 +8,12 @@ function generateImageStyles() { const end = 2500; const imageConfig = {}; const aspectRatios = { - '1_1': {w: 1, h: 1}, - '4_3': {w: 4, h: 3}, - '8_7': {w: 8, h: 7}, - '1_2': {w: 1, h: 2}, - '16_9': {w: 16, h: 9}, - '21_6': {w: 21, h: 6}, + '1_1': { w: 1, h: 1 }, + '4_3': { w: 4, h: 3 }, + '8_7': { w: 8, h: 7 }, + '1_3': { w: 1, h: 3 }, + '16_9': { w: 16, h: 9 }, + '21_6': { w: 21, h: 6 }, }; Object.keys(aspectRatios).forEach((key) => { diff --git a/starter-kits/tailwind/source/default/patterns/01-atoms/placeholder/placeholder.wingsuit.yml b/starter-kits/tailwind/source/default/patterns/01-atoms/placeholder/placeholder.wingsuit.yml index fe764b379..68cdaa547 100644 --- a/starter-kits/tailwind/source/default/patterns/01-atoms/placeholder/placeholder.wingsuit.yml +++ b/starter-kits/tailwind/source/default/patterns/01-atoms/placeholder/placeholder.wingsuit.yml @@ -26,7 +26,7 @@ placeholder: label: Classes description: Classes applied to background image container. type: textfield - preview: w-full h-20 bg-cover + preview: w-full h-full bg-cover style: label: Image style type: select @@ -48,14 +48,6 @@ placeholder: lg: responsive_16_9_1400w xl: responsive_21_6_1600w 2xl: responsive_21_6_2000w - card: - style: responsive_4_3_600w - breakpoints: - sm: responsive_4_3_600w - card_horizontal: - style: responsive_1_2_200w - breakpoints: - sm: responsive_1_2_200w article: style: responsive_8_7_400w breakpoints: diff --git a/starter-kits/tailwind/source/default/patterns/02-molecules/avatar/avatar.twig b/starter-kits/tailwind/source/default/patterns/02-molecules/avatar/avatar.twig index 30c0e2140..cd738353f 100644 --- a/starter-kits/tailwind/source/default/patterns/02-molecules/avatar/avatar.twig +++ b/starter-kits/tailwind/source/default/patterns/02-molecules/avatar/avatar.twig @@ -23,9 +23,9 @@ ] %} {% set image_classes = [ - 'relative overflow-hidden flex-none w-48', - variant == 'default'? 'h-48 rounded-full mx-auto', - variant == 'horizontal' ? 'h-auto -m-8 mr-8' + 'relative overflow-hidden flex-none ', + variant == 'default'? 'h-48 w-48 rounded-full mx-auto', + variant == 'horizontal' ? 'h-auto -m-8 mr-8 w-24 lg-48' ] %} {# diff --git a/starter-kits/tailwind/source/default/patterns/02-molecules/avatar/avatar.wingsuit.yml b/starter-kits/tailwind/source/default/patterns/02-molecules/avatar/avatar.wingsuit.yml index 090ded7cb..c24f651fe 100644 --- a/starter-kits/tailwind/source/default/patterns/02-molecules/avatar/avatar.wingsuit.yml +++ b/starter-kits/tailwind/source/default/patterns/02-molecules/avatar/avatar.wingsuit.yml @@ -2,6 +2,7 @@ avatar: use: "@molecules/avatar/avatar.twig" label: Avatar icon_path: ws-assets://images/avatar-icon.svg + allow_variant_expose: true description: "An avatar represent a user, and displays the profile picture." fields: text: @@ -25,12 +26,13 @@ avatar: variant: default settings: expanded: true - settings: image: type: media_library label: Image description: The profile picture. + view_mode: 1x1 + allow_expose: true preview: id: placeholder variant: image @@ -53,7 +55,9 @@ avatar: settings: image: id: placeholder - variant: image + variant: background + definition: + view_mode: background settings: - style: responsive_1_2_400w + style: responsive_1_3_200w diff --git a/starter-kits/tailwind/source/default/patterns/02-molecules/card/card.twig b/starter-kits/tailwind/source/default/patterns/02-molecules/card/card.twig index 1a7ef400d..111016d5a 100644 --- a/starter-kits/tailwind/source/default/patterns/02-molecules/card/card.twig +++ b/starter-kits/tailwind/source/default/patterns/02-molecules/card/card.twig @@ -21,19 +21,28 @@ variant == 'horizontal' ? 'flex-col md:flex-row' : 'flex-col' ] | sort | join(' ') | trim ) %} +{% set image_classes = ([ + variant == 'default' ? 'flex-0', + variant == 'horizontal' ? 'h-48 lg:h-auto w-full lg:w-48 relative' + ] | sort | join(' ') | trim ) %} + {% set attributes = attributes|default(create_attribute()).addClass(classes) %} {# TEMPLATE #} <{{ element }} {{ attributes }}> {% if image is not empty %} -
+
{% block image %} {{ image }} {% endblock %}
{% endif %}
- {% embed "@atoms/rich-text/rich-text.twig" %} + {% embed "@atoms/rich-text/rich-text.twig" with { + headline_element: headline_element, + headline: headline, + text: text + } only %} {% block text %} <{{ headline_element }}> @@ -49,4 +58,5 @@
{{ button }}
+
diff --git a/starter-kits/tailwind/source/default/patterns/02-molecules/card/card.wingsuit.yml b/starter-kits/tailwind/source/default/patterns/02-molecules/card/card.wingsuit.yml index e908b2d96..6ac7337bc 100644 --- a/starter-kits/tailwind/source/default/patterns/02-molecules/card/card.wingsuit.yml +++ b/starter-kits/tailwind/source/default/patterns/02-molecules/card/card.wingsuit.yml @@ -2,6 +2,7 @@ card: use: "@molecules/card/card.twig" label: Card icon_path: ws-assets://images/card-icon.svg + allow_variant_expose: true description: Amazing card component with image, titles, body and link. fields: preheadline: @@ -37,22 +38,24 @@ card: settings: image: id: placeholder - variant: image + variant: background definition: - view_mode: 16x9 + view_mode: background settings: - style: card_horizontal + style: responsive_1_3_200w settings: image: label: Image type: media_library description: The image tag. + view_mode: 16x9 + allow_expose: true preview: id: placeholder variant: image settings: - style: card + style: responsive_16_9_600w alignment: type: select label: Alignment diff --git a/starter-kits/tailwind/source/default/patterns/03-organisms/container/container.twig b/starter-kits/tailwind/source/default/patterns/03-organisms/container/container.twig index f8ad5f629..a40e28897 100644 --- a/starter-kits/tailwind/source/default/patterns/03-organisms/container/container.twig +++ b/starter-kits/tailwind/source/default/patterns/03-organisms/container/container.twig @@ -39,7 +39,7 @@ pattern_configuration('spacing', '', 'padding_bottom')[padding_bottom], pattern_configuration('container', '', 'width')[width], classes, - 'mx-auto' + 'mx-auto w-full' ] | sort | join(' ') | trim )%} {% set attributes = attributes|default(create_attribute()) %} diff --git a/starter-kits/tailwind/source/default/patterns/03-organisms/footer/footer.twig b/starter-kits/tailwind/source/default/patterns/03-organisms/footer/footer.twig index 9b5df4412..1d3ac2772 100644 --- a/starter-kits/tailwind/source/default/patterns/03-organisms/footer/footer.twig +++ b/starter-kits/tailwind/source/default/patterns/03-organisms/footer/footer.twig @@ -1,7 +1,7 @@