fix: migrate to aem.js

.storybook/main.js

@@ -7,7 +7,7 @@ module.exports = {
     name: '@storybook/addon-coverage',
     options: {
       istanbul: {
-        exclude: ['**/lib-franklin.js', '**/scripts.js']
+        exclude: ['**/aem.js', '**/scripts.js']
       }
     }
   }, '@storybook/addon-mdx-gfm'],

404.html

@@ -11,7 +11,7 @@
   <meta property="og:title" content="Page not found">
   <script src="/scripts/scripts.js" type="module" crossorigin="use-credentials"></script>
   <script type="module">
-    import { sampleRUM } from '/scripts/lib-franklin.js';
+    import { sampleRUM } from '/scripts/aem.js';
 
     window.addEventListener('load', () => {
       if (document.referrer) {

blocks/footer/footer.js

@@ -1,5 +1,5 @@
-import { readBlockConfig, decorateIcons } from '../../scripts/lib-franklin.js';
-import { createTag } from '../../scripts/scripts.js';
+import { readBlockConfig } from '../../scripts/aem.js';
+import { createTag, decorateIcons } from '../../scripts/scripts.js';
 
 /**
  * loads and decorates the footer

blocks/footer/footer.stories.js

@@ -5,7 +5,7 @@ import {
   buildBlock,
   loadBlock,
   decorateBlock,
-} from '../../scripts/lib-franklin.js';
+} from '../../scripts/aem.js';
 import _style from './footer.css';
 import { createTag } from '../../scripts/scripts.js';
 

blocks/header/header.js

@@ -1,5 +1,5 @@
-import { readBlockConfig, decorateIcons } from '../../scripts/lib-franklin.js';
-import { isMobile, createTag } from '../../scripts/scripts.js';
+import { readBlockConfig } from '../../scripts/aem.js';
+import { isMobile, createTag, decorateIcons } from '../../scripts/scripts.js';
 
 /**
  * collapses all open nav sections

blocks/header/header.stories.js

@@ -6,7 +6,7 @@ import {
   buildBlock,
   loadBlock,
   decorateBlock,
-} from '../../scripts/lib-franklin.js';
+} from '../../scripts/aem.js';
 import _style from './header.css';
 import { createTag } from '../../scripts/scripts.js';
 

components/avatar/avatar.js

@@ -1,4 +1,4 @@
-import { loadCSS, toCamelCase } from '../../scripts/lib-franklin.js';
+import { loadCSS, toCamelCase } from '../../scripts/aem.js';
 import { createTag } from '../../scripts/scripts.js';
 
 class Avatar extends HTMLElement {

components/tag/tag.js

@@ -1,5 +1,5 @@
-import { loadCSS, decorateIcons } from '../../scripts/lib-franklin.js';
-import { createTag } from '../../scripts/scripts.js';
+import { loadCSS } from '../../scripts/aem.js';
+import { createTag, decorateIcons } from '../../scripts/scripts.js';
 
 class Tag extends HTMLElement {
   constructor() {

docs/developers/buttons.mdx

@@ -69,7 +69,7 @@ To include an icon in a button you can use the `decorateIcons` function to decor
 The HTMLElement above should then be passed into the `decorateIcons` function to load the icon inside the span. Below is a full example.
 
 ```javascript
-import { decorateIcons } from 'lib-franklin.js';
+import { decorateIcons } from 'scripts.js';
 
 const container = document.createElement('p');
 container.classList.add('button-container');

docs/stories/components/buttons.stories.js

@@ -2,8 +2,7 @@
 import { within, waitFor, userEvent } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 import { FranklinTemplate } from '@dylandepass/franklin-storybook-addon';
-import { decorateIcons } from '../../../scripts/lib-franklin.js';
-import { createTag, loadPage } from '../../../scripts/scripts.js';
+import { createTag, loadPage, decorateIcons } from '../../../scripts/scripts.js';
 
 function decorate(block) {
   decorateIcons(block);
@@ -76,6 +75,10 @@ export const AuthoredButtons = {
       expect(canvas.getByText('Authored Buttons')).toBeInTheDocument();
     });
 
+    await waitFor(() => {
+      expect(canvas.getByTitle('Primary')).toBeInTheDocument();
+    });
+
     const primary = canvas.getByTitle('Primary');
     expect(primary).toBeInTheDocument();
 

head.html

@@ -1,5 +1,5 @@
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
-<script src="/scripts/lib-franklin.js" type="module"></script>
+<script src="/scripts/aem.js" type="module"></script>
 <script src="/scripts/scripts.js" type="module"></script>
 <link id="theme" rel="stylesheet" href="/styles/themes/rosalind-light.css" />
 <link rel="stylesheet" href="/styles/system.css">