Spectrum CSS support for cards. (#107)

* Spectrum CSS support for cards. * Update tests --------- Co-authored-by: Mariia Lukianets <lukianet@adobe.com>
adobecom · Dec 11, 2024 · 6c61f6b · 6c61f6b
1 parent 0e37470
commit 6c61f6b
Show file tree

Hide file tree

Showing 9 changed files with 2,311 additions and 547 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,21 +21,26 @@
     },
     "dependencies": {
         "@adobecom/milo": "github:adobecom/milo#stage",
+        "@spectrum-css/button": "^13.5.0",
+        "@spectrum-css/link": "^5.2.0",
+        "@spectrum-css/page": "^8.2.0",
+        "@spectrum-css/tokens": "^14.6.0",
+        "@spectrum-css/typography": "^6.2.0",
         "@spectrum-web-components/action-bar": "^0.47.2",
         "@spectrum-web-components/action-button": "^0.47.2",
         "@spectrum-web-components/action-group": "^0.47.2",
         "@spectrum-web-components/action-menu": "^0.47.2",
         "@spectrum-web-components/badge": "^0.47.2",
         "@spectrum-web-components/breadcrumbs": "^0.47.2",
-        "@spectrum-web-components/button": "^0.47.2",
         "@spectrum-web-components/button-group": "^0.47.2",
+        "@spectrum-web-components/button": "^0.47.2",
         "@spectrum-web-components/checkbox": "^0.47.2",
         "@spectrum-web-components/dialog": "^0.47.2",
         "@spectrum-web-components/divider": "^0.47.2",
         "@spectrum-web-components/help-text": "^0.47.2",
         "@spectrum-web-components/icon": "^0.47.2",
-        "@spectrum-web-components/icons": "^0.47.2",
         "@spectrum-web-components/icons-workflow": "^0.47.2",
+        "@spectrum-web-components/icons": "^0.47.2",
         "@spectrum-web-components/link": "^0.47.2",
         "@spectrum-web-components/menu": "^0.47.2",
         "@spectrum-web-components/number-field": "^0.47.2",

diff --git a/studio.html b/studio.html
@@ -57,6 +57,7 @@
 
         <!-- OST -->
         <script src="studio/ost/index.js"></script>
+        <link rel="stylesheet" href="studio/libs/spectrum.css" />
         <link rel="stylesheet" href="./studio/ost/index.css" />
         <link rel="stylesheet" href="./studio/style.css" />
         <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css" />
@@ -100,7 +101,7 @@
         </script>
         <script src="https://www.adobe.com/libs/deps/imslib.min.js"></script>
     </head>
-    <body>
+    <body class="spectrum spectrum--medium spectrum--light">
         <main>
             <sp-theme color="light" scale="medium">
                 <script>

diff --git a/studio/build.mjs b/studio/build.mjs
@@ -23,3 +23,9 @@ await build({
     entryPoints: ['src/rte/prosemirror.js'],
     outfile: 'libs/prosemirror.js',
 });
+
+await build({
+    ...defaults,
+    entryPoints: ['src/spectrum.css.js'],
+    outfile: 'libs/spectrum.js',
+});
diff --git a/studio/libs/spectrum.css b/studio/libs/spectrum.css
diff --git a/studio/libs/spectrum.js b/studio/libs/spectrum.js
diff --git a/studio/src/spectrum.css.js b/studio/src/spectrum.css.js
@@ -0,0 +1,6 @@
+import '@spectrum-css/button/dist/index-base.css';
+import '@spectrum-css/button/dist/themes/spectrum.css';
+import '@spectrum-css/link/dist/index-base.css';
+import '@spectrum-css/page/dist/index.css';
+import '@spectrum-css/tokens/dist/index.css';
+import '@spectrum-css/typography/dist/index.css';
diff --git a/studio/test/aem/content-navigation.test.html.js b/studio/test/aem/content-navigation.test.html.js
@@ -7,8 +7,8 @@ import '../../src/aem/aem-fragments.js';
 import '../../src/aem/table-view.js';
 import '../../src/aem/render-view.js';
 
-import { mockFetch } from '@adobecom/milo/libs/features/mas/mocks/fetch.js';
-import { withAem } from '@adobecom/milo/libs/features/mas/mocks/aem.js';
+import { mockFetch } from '@adobecom/milo/libs/features/mas/test/mocks/fetch.js';
+import { withAem } from '@adobecom/milo/libs/features/mas/test/mocks/aem.js';
 import { getTemplateContent } from '../utils.js';
 
 const spTheme = document.querySelector('sp-theme');

diff --git a/studio/test/rte/rte-field.test.html b/studio/test/rte/rte-field.test.html
@@ -39,8 +39,8 @@
             import '../../src/rte/rte-field.js';
             import '../../src/rte/rte-link-editor.js';
             import '@adobecom/milo/libs/deps/mas/mas.js';
-            import { mockFetch } from '@adobecom/milo/libs/features/mas/mocks/fetch.js';
-            import { withWcs } from '@adobecom/milo/libs/features/mas/mocks/wcs.js';
+            import { mockFetch } from '@adobecom/milo/libs/features/mas/test/mocks/fetch.js';
+            import { withWcs } from '@adobecom/milo/libs/features/mas/test/mocks/wcs.js';
 
             import {
                 createFromTemplate,