fix(style): make styles work with shadow DOM

access-ci-org · Sep 18, 2024 · ec7fb14 · ec7fb14
1 parent df79c21
commit ec7fb14
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -32,7 +32,7 @@ This component provides a user interface to browse available Resources and their
 | `allowedFilters`     | A list of filters you want users to see. Ex: `["GPU Compute"]`                                                         | **False** |
 | `excludedCategories` | A list of filter **categories** that you want hidden from users. Ex: `["Specialized Support", "Specialized Hardware"]` | **False** |
 | `excludedFilters`    | A list of filters that you want hidden from users. Ex: `["ACCESS Allocated", "ACCESS OnDemand"]`                       | **False** |
-| `excludedResources` | A list of Resources that you want hidden from users. Ex: `["ACCESS Credits"]`  | **False** |
+| `excludedResources`  | A list of Resources that you want hidden from users. Ex: `["ACCESS Credits"]`                                          | **False** |
 | `target`             | The DOM element where the component will be rendered.                                                                  | **True**  |
 
 Note: Avoid combining `allowedCategories` and `excludedCategories`, or `allowedFilters` and `excludedFilters`. If an invalid combination is found, it will default to what is specified in the `allowed*` options
@@ -65,8 +65,10 @@ In order for the Bootstrap styles to be applied, the component target element ne
 
 ```html
 <div class="bootstrap">
-  <div class="bootstrap-variables bootstrap-fonts">
-    <div id="resource-catalog-react"></div>
+  <div class="bootstrap-variables">
+    <div class="bootstrap-fonts">
+      <div id="resource-catalog-react"></div>
+    </div>
   </div>
 </div>
 ```

diff --git a/index.html b/index.html
@@ -10,16 +10,25 @@
       integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
       crossorigin="anonymous"
     />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> -->
+    -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"
+    />
   </head>
   <body>
-
     <div id="resource-catalog-react"></div>
 
     <script type="module">
-      import { resourceCatalog, shadowTarget } from "http://localhost:3000/xras-ui.js";
+      import {
+        resourceCatalog,
+        shadowTarget,
+      } from "http://localhost:3000/dist/xras-ui.js";
       resourceCatalog({
-        target: shadowTarget(document.getElementById("resource-catalog-react"), {accessStyles: true}),
+        target: shadowTarget(
+          document.getElementById("resource-catalog-react"),
+          { accessStyles: true }
+        ),
         onRamps: true,
       });
     </script>

diff --git a/src/bootstrap/access.scss b/src/bootstrap/access.scss
@@ -9,7 +9,8 @@ $warning: #ef7537;
 $accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#1a5b6e'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
 $accordion-button-active-icon: $accordion-button-icon;
 
-body {
+body,
+:root {
   --contrast: #232323;
   --contrast-2: #3f3f3f;
   --contrast-3: #707070;
@@ -18,14 +19,14 @@ body {
   --base-3: #ffffff;
   --black: #000000;
   --teal-200: #ecf9f8;
-  --teal-300: #CEE8E9;
+  --teal-300: #cee8e9;
   --teal-400: #48c0b9;
   --teal-600: #107180;
   --teal-700: #1a5b6e;
   --yellow-400: #ffc42d;
   --orange-400: #f07537;
   // Bootstrap
-  --bs-font-sans-serif: 'Archivo', sans-serif;
+  --bs-font-sans-serif: "Archivo", sans-serif;
   --bs-link-color: var(--teal-600);
   --bs-link-hover-color: var(--orange-400);
-}
+}
diff --git a/src/main.jsx b/src/main.jsx
@@ -26,6 +26,7 @@ export function shadowTarget(
 ) {
   const shadow = host.attachShadow({ mode: "open" });
   const bsOuter = document.createElement("div");
+  const bsMiddle = document.createElement("div");
   const bsInner = document.createElement("div");
   const target = document.createElement("div");
   const bsStyle = document.createElement("link");
@@ -41,15 +42,19 @@ export function shadowTarget(
   accessStyle.href = `${baseUrl}/access.css`;
 
   bsInner.appendChild(target);
-  bsOuter.appendChild(bsInner);
+  bsMiddle.appendChild(bsInner);
+  bsOuter.appendChild(bsMiddle);
   shadow.appendChild(bsStyle);
   shadow.appendChild(uiStyle);
   shadow.appendChild(accessStyle);
   shadow.appendChild(bsOuter);
 
   bsOuter.classList.add("bootstrap");
-  if (bootstrapVariables) bsInner.classList.add("bootstrap-variables");
-  if (bootstrapFonts) bsInner.classList.add("bootstrap-fonts");
+  if (bootstrapVariables) bsMiddle.classList.add("bootstrap-variables");
+  if (bootstrapFonts) {
+    bsInner.classList.add("bootstrap-fonts");
+    bsInner.setAttribute("data-bs-theme", "light");
+  }
 
   return target;
 }
@@ -123,22 +128,15 @@ export function publicationsSelect({ target, routes }) {
   );
 }
 
-export function resourceCatalog({
-  target,
-  catalogSources,
-  onRamps
-}) {
+export function resourceCatalog({ target, catalogSources, onRamps }) {
   const store = configureStore({
     reducer: {
       resourceCatalog: catalogSlice,
     },
   });
   ReactDOM.createRoot(target).render(
     <Provider store={store}>
-      <ResourceCatalog
-        catalogSources={catalogSources}
-        onRamps={onRamps}
-      />
+      <ResourceCatalog catalogSources={catalogSources} onRamps={onRamps} />
     </Provider>
   );
 }