feat(css): add rtl css - FRONT-3515

scripts/dist-presets.sh

@@ -15,5 +15,7 @@ rm -rf ./dist/packages
 mkdir -p ./dist/packages
 cp -r ./src/presets/ec/dist ./dist/packages/ec
 cp -r ./src/presets/reset/dist/styles ./dist/packages/ec
+cp -r ./src/presets/rtl/dist/styles ./dist/packages/ec
 cp -r ./src/presets/eu/dist ./dist/packages/eu
 cp -r ./src/presets/reset/dist/styles ./dist/packages/eu
+cp -r ./src/presets/rtl/dist/styles ./dist/packages/eu

src/playground/ec/.storybook/preview-head.html

@@ -40,6 +40,7 @@
       createLink('./styles/optional/ecl-ec-default.css', 'screen')
     );
     head.appendChild(createLink('./styles/ecl-ec.css', 'screen'));
+    head.appendChild(createLink('./styles/optional/ecl-rtl.css', 'screen'));
     head.appendChild(createLink('./styles/ecl-ec-print.css', 'print'));
   }
 </script>

src/playground/ec/.storybook/preview.js

@@ -37,6 +37,12 @@ addParameters({
       picked: true,
       hideCode: true,
     },
+    {
+      id: 'ecl-rtl',
+      code: `<link rel="stylesheet" type="text/css" href="./styles/optional/ecl-rtl.css" />`,
+      picked: false,
+      hideCode: true,
+    },
     {
       id: 'ecl-ec-print',
       code: `<link rel="stylesheet" type="text/css" href="./styles/ecl-ec-print.css" />`,

src/playground/eu/.storybook/preview-head.html

@@ -40,6 +40,7 @@
       createLink('./styles/optional/ecl-eu-default.css', 'screen')
     );
     head.appendChild(createLink('./styles/ecl-eu.css', 'screen'));
+    head.appendChild(createLink('./styles/optional/ecl-rtl.css', 'screen'));
     head.appendChild(createLink('./styles/ecl-eu-print.css', 'print'));
   }
 </script>

src/playground/eu/.storybook/preview.js

@@ -21,7 +21,7 @@ addParameters({
   },
   cssresources: [
     {
-      id: 'reset',
+      id: 'ecl-reset',
       code: `<link rel="stylesheet" type="text/css" href="./styles/optional/ecl-reset.css" />`,
       picked: true,
       hideCode: true,
@@ -38,6 +38,12 @@ addParameters({
       picked: true,
       hideCode: true,
     },
+    {
+      id: 'ecl-rtl',
+      code: `<link rel="stylesheet" type="text/css" href="./styles/optional/ecl-rtl.css" />`,
+      picked: false,
+      hideCode: true,
+    },
     {
       id: 'ecl-eu-print',
       code: `<link rel="stylesheet" type="text/css" href="./styles/ecl-eu-print.css" />`,

src/presets/rtl/.npmignore

@@ -0,0 +1,2 @@
+ecl-builder.config.js
+src

src/presets/rtl/README.md

@@ -0,0 +1,5 @@
+# ECL preset: rtl
+
+This preset contains a css to handle right-to-left display.
+
+It only provides an optional css file.

src/presets/rtl/ecl-builder.config.js

@@ -0,0 +1,30 @@
+const path = require('path');
+const pkg = require('./package.json');
+
+const isProd = process.env.NODE_ENV === 'production';
+const outputFolder = path.resolve(__dirname, isProd ? './dist' : './build');
+
+const nodeModules = path.resolve(__dirname, '../../../node_modules');
+
+// SCSS includePaths
+const includePaths = [nodeModules];
+
+const banner = `${pkg.name} - ${
+  pkg.version
+} Built on ${new Date().toISOString()}`;
+
+module.exports = {
+  scripts: [],
+  styles: [
+    {
+      entry: path.resolve(__dirname, 'src/rtl.scss'),
+      dest: path.resolve(outputFolder, 'styles/optional/ecl-rtl.css'),
+      options: {
+        banner,
+        includePaths,
+        sourceMap: false,
+      },
+    },
+  ],
+  copy: [],
+};

src/presets/rtl/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@ecl/preset-rtl",
+  "author": "European Commission",
+  "license": "EUPL-1.2",
+  "version": "3.2.2",
+  "description": "ECL RTL preset",
+  "style": "dist/styles/ecl-rtl.css",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build:copy": "ecl-builder copy",
+    "build:scripts": "ecl-builder scripts",
+    "build:styles": "ecl-builder styles",
+    "build": "run-p build:*",
+    "clean": "rimraf build dist",
+    "dist": "cross-env NODE_ENV=production run-p build:*",
+    "watch": "ecl-builder watch",
+    "prepublish": "npm run clean && npm run build && npm run dist"
+  },
+  "devDependencies": {
+    "@ecl/builder": "^3.2.2",
+    "chokidar-cli": "2.1.0",
+    "cross-env": "7.0.3",
+    "normalize.css": "8.0.1",
+    "npm-run-all": "4.1.5",
+    "rimraf": "3.0.2"
+  },
+  "keywords": [
+    "ecl",
+    "europa-component-library",
+    "design-system"
+  ],
+  "homepage": "https://github.com/ec-europa/europa-component-library",
+  "bugs": {
+    "url": "https://github.com/ec-europa/europa-component-library/issues"
+  }
+}

src/presets/rtl/src/rtl.scss

@@ -0,0 +1,3 @@
+html {
+  direction: rtl;
+}

src/website/webpack.config.dev.js

@@ -248,6 +248,7 @@ module.exports = {
       'process.env.ECL_EU_DEFAULT_CSS': JSON.stringify('n/a'),
       'process.env.ECL_EU_JS': JSON.stringify('n/a'),
       'process.env.ECL_RESET_CSS': JSON.stringify('n/a'),
+      'process.env.ECL_RTL_CSS': JSON.stringify('n/a'),
     }),
     new webpack.HotModuleReplacementPlugin(),
   ],

src/website/webpack.config.prod.js

@@ -371,6 +371,9 @@ module.exports = {
       'process.env.ECL_RESET_CSS': JSON.stringify(
         (sri['ecl-reset.css'] || []).join(' ') || 'n/a'
       ),
+      'process.env.ECL_RTL_CSS': JSON.stringify(
+        (sri['ecl-rtl.css'] || []).join(' ') || 'n/a'
+      ),
     }),
     new MiniCssExtractPlugin({
       // Options similar to the same options in webpackOptions.output