wip scss transform

bpmn-io · Oct 13, 2023 · 45341b8 · 45341b8
1 parent 986083a
commit 45341b8
Show file tree

Hide file tree

Showing 9 changed files with 1,372 additions and 3 deletions.
diff --git a/e2e/carbon/withCarbonStyles.html b/e2e/carbon/withCarbonStyles.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Forms playground</title>
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap" rel="stylesheet">
+    <style>
+      html, body, #container {
+        margin: 0;
+        padding: 0;
+        width: 100vw;
+        height: 100vh;
+      }
+    </style>
+</head>
+<body class="cds--g10">
+    <div id="container" role="main"></div>
+    <script type="module" src="withCarbonStyles.js"></script>
+</body>
+</html>
diff --git a/e2e/carbon/withCarbonStyles.js b/e2e/carbon/withCarbonStyles.js
@@ -0,0 +1,11 @@
+import '@bpmn-io/form-js/dist/assets/form-js.css';
+import '@bpmn-io/form-js/dist/assets/form-js-editor.css';
+import '@bpmn-io/form-js/dist/assets/form-js-playground.css';
+
+import './theme.scss';
+
+import '../../packages/form-js-carbon-styles/src/carbon-styles.scss';
+
+import { renderSchema } from '../renderSchema';
+
+renderSchema();
diff --git a/e2e/visual/carbon-styles.spec.js b/e2e/visual/carbon-styles.spec.js
@@ -0,0 +1,38 @@
+const { expect } = require('@playwright/test');
+
+const { test } = require('../test-fixtures');
+
+const schema = require('./fixtures/form.json');
+
+test('carbon styles', async ({ page, makeAxeBuilder }) => {
+
+  // given
+  await page.route('/form', route => {
+
+    route.fulfill({
+      status: 200,
+      body: JSON.stringify({
+        data: {
+          schema,
+          component: 'viewer'
+        }
+      })
+    });
+  });
+
+  // when
+  await page.goto('/withCarbonStyles');
+
+  await page.waitForSelector('#container', {
+    state: 'visible'
+  });
+
+  // then
+  await expect(page).toHaveScreenshot();
+
+  // and then
+  const results = await makeAxeBuilder().analyze();
+
+  expect(results.violations).toHaveLength(0);
+  expect(results.passes.length).toBeGreaterThan(0);
+});
diff --git a/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-chromium-linux.png b/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-chromium-linux.png
diff --git a/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-firefox-linux.png b/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-firefox-linux.png
diff --git a/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-webkit-linux.png b/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-webkit-linux.png