diff --git a/package-lock.json b/package-lock.json
index 7de18bf..c251b8f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
"@storybook/blocks": "^8.4.5",
"@storybook/web-components": "^8.4.5",
"@storybook/web-components-vite": "^8.4.5",
+ "@types/browserify": "^12.0.40",
"@types/node": "^20.0.0",
"@types/prettier": "3.0.0",
"browserify": "^17.0.0",
@@ -1487,6 +1488,17 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/@types/browserify": {
+ "version": "12.0.40",
+ "resolved": "https://registry.npmjs.org/@types/browserify/-/browserify-12.0.40.tgz",
+ "integrity": "sha512-vH5hW7Kt2OoSkCDLzCATlG43lrA2sMIVDvN5PaXsMBPxR4aZSdGJj3de6Z8O8cglnTWp6GuPE0B2HKHi0E4T0w==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@types/insert-module-globals": "*",
+ "@types/node": "*"
+ }
+ },
"node_modules/@types/estree": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -1494,6 +1506,16 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/@types/insert-module-globals": {
+ "version": "7.0.5",
+ "resolved": "https://registry.npmjs.org/@types/insert-module-globals/-/insert-module-globals-7.0.5.tgz",
+ "integrity": "sha512-stIOYdMg9UAGAaXQxvWrTC/FE8RqVSsJpr9guQmkO00W8OXIdu9LTC9SEinCW3jBq5273716GIyYcCNly718hQ==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@types/node": "*"
+ }
+ },
"node_modules/@types/mdx": {
"version": "2.0.13",
"resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz",
diff --git a/package.json b/package.json
index 15270fb..e278106 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
"author": "The Linux Foundation",
"scripts": {
"build:tokens": "ts-node src/scripts/build.ts",
- "build:browser": "browserify src/components/footer/footer.component.ts -p [ tsify ] -o dist/browser/footer.bundle.js",
+ "build:browser": "ts-node src/scripts/build-components.ts",
"build": "npm run build:tokens && npm run format && tsc && npm run build:browser",
"prepare": "npm run build",
"format": "prettier --write \"src/**/*.{ts,js,json,md}\"",
@@ -25,6 +25,7 @@
"@storybook/blocks": "^8.4.5",
"@storybook/web-components": "^8.4.5",
"@storybook/web-components-vite": "^8.4.5",
+ "@types/browserify": "^12.0.40",
"@types/node": "^20.0.0",
"@types/prettier": "3.0.0",
"browserify": "^17.0.0",
diff --git a/src/components/footer/footer.component.ts b/src/components/footer/footer.component.ts
index e7d1d0d..52b982f 100644
--- a/src/components/footer/footer.component.ts
+++ b/src/components/footer/footer.component.ts
@@ -1,6 +1,9 @@
// Copyright The Linux Foundation and each contributor to LFX.
// SPDX-License-Identifier: MIT
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
import { style } from './footer.style';
/**
@@ -15,43 +18,26 @@ import { style } from './footer.style';
* @cssproperty --lfx-footer-bg - Background color of the footer
* @cssproperty --lfx-footer-text - Text color of the footer
*/
-export class LFXFooter extends HTMLElement {
- constructor() {
- super();
- this.attachShadow({ mode: 'open' });
- }
-
- private getTemplate(): string {
- return `
-
+@customElement('lfx-footer')
+export class LFXFooter extends LitElement {
+ static styles = style;
+ render() {
+ return html`
`;
}
-
- connectedCallback() {
- if (this.shadowRoot) {
- this.shadowRoot.innerHTML = this.getTemplate();
- }
- }
}
-
-// Use IIFE to register the component immediately
-(() => {
- if (typeof window !== 'undefined') {
- if (!customElements.get('lfx-footer')) {
- customElements.define('lfx-footer', LFXFooter);
- }
- }
-})();
diff --git a/src/components/footer/footer.style.ts b/src/components/footer/footer.style.ts
index 360650c..16dd8c5 100644
--- a/src/components/footer/footer.style.ts
+++ b/src/components/footer/footer.style.ts
@@ -1,58 +1,65 @@
// Copyright The Linux Foundation and each contributor to LFX.
// SPDX-License-Identifier: MIT
-export const style = `
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');
-
-:host {
- display: block;
- background: var(--lfx-footer-bg, transparent);
- padding: 3rem 2rem 0 2rem;
- color: var(--lfx-footer-text, #5b6367);
- font-family: 'Open Sans', sans-serif;
-}
-
-:host * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-size: 0.75rem;
- color: #808b91;
- text-decoration: none;
-}
-
-.footer-container {
- margin: 0 auto;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.footer-content {
- text-align: center;
- font-size: 0.75rem;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- gap: 1rem;
-}
-
-.copyright-container {
- display: flex;
- flex-direction: column;
-}
-
-.copyright {
- font-size: 0.75rem;
-}
-
-.copyright a {
- color: #5b6367;
-}
-
-.copyright a:hover {
- text-decoration: underline;
- color: #5b6367;
-}
+import { css } from 'lit';
+
+export const style = css`
+ @font-face {
+ font-family: 'Open Sans', sans-serif;
+ src: url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap) format('truetype');
+ font-weight: normal;
+ font-style: normal;
+ }
+
+ :host {
+ display: block;
+ background: var(--lfx-footer-bg, transparent);
+ padding: 3rem 2rem 0 2rem;
+ color: var(--lfx-footer-text, #808b91);
+ font-family: 'Open Sans', sans-serif;
+ }
+
+ :host * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-size: 0.75rem;
+ color: var(--lfx-footer-text, #808b91);
+ text-decoration: none;
+ }
+
+ .footer-container {
+ margin: 0 auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .footer-content {
+ text-align: center;
+ font-size: 0.75rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .copyright-container {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .copyright {
+ font-size: 0.75rem;
+ }
+
+ .copyright a {
+ color: var(--lfx-footer-text, #5b6367);
+ }
+
+ .copyright a:hover {
+ text-decoration: underline;
+ color: var(--lfx-footer-text, #5b6367);
+ }
`;
diff --git a/src/design/tokens/tokens.json b/src/design/tokens/tokens.json
index 7443747..6da92d8 100644
--- a/src/design/tokens/tokens.json
+++ b/src/design/tokens/tokens.json
@@ -50608,4 +50608,4 @@
"Aura/Dark"
]
}
-}
\ No newline at end of file
+}
diff --git a/src/scripts/build-components.ts b/src/scripts/build-components.ts
new file mode 100644
index 0000000..aa4969b
--- /dev/null
+++ b/src/scripts/build-components.ts
@@ -0,0 +1,18 @@
+import browserify from 'browserify';
+import fs from 'fs';
+import path from 'path';
+
+const components = ['footer/footer.component.ts'];
+
+components.forEach((component) => {
+ const componentName = path.basename(component, '.ts');
+ const bundlePath = `dist/browser/${componentName}.bundle.js`;
+
+ browserify(`src/components/${component}`)
+ .plugin('tsify')
+ .bundle()
+ .pipe(fs.createWriteStream(bundlePath))
+ .on('finish', () => {
+ console.log(`Built ${bundlePath}`);
+ });
+});
diff --git a/src/scripts/tsconfig.json b/src/scripts/tsconfig.json
index c1e89f1..0917f1c 100644
--- a/src/scripts/tsconfig.json
+++ b/src/scripts/tsconfig.json
@@ -9,7 +9,9 @@
"moduleResolution": "node",
"sourceMap": true,
"outDir": "../../dist/scripts",
- "resolveJsonModule": true
+ "resolveJsonModule": true,
+ "experimentalDecorators": true,
+ "emitDecoratorMetadata": false
},
"include": ["./**/*"],
"exclude": ["node_modules"]
diff --git a/tsconfig.json b/tsconfig.json
index f446a4c..59de28e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,7 +8,9 @@
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
- "rootDir": "./src"
+ "rootDir": "./src",
+ "experimentalDecorators": true,
+ "emitDecoratorMetadata": false
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]