diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
new file mode 100644
index 0000000..cd95763
--- /dev/null
+++ b/.github/CODEOWNERS
@@ -0,0 +1 @@
+@asithade
\ No newline at end of file
diff --git a/README.md b/README.md
index b774320..3e06ceb 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,15 @@
# LFX UI Core
-A package that contains core functionality for LFX UI products. It includes design tokens and PrimeTek theme configuration that is shared across LFX UI products.
+A package that contains core functionality for LFX UI products. It includes design tokens and PrimeOne theme configuration that is shared across LFX UI products.
## Overview
### Design Tokens
+
This package contains design tokens and PrimeTek theme configuration that is shared across LFX UI products.
The generated tokens are organized into three layers:
+
- **Primitive Tokens**: Base-level design values (colors, spacing, typography, etc.)
- **Semantic Tokens**: Purpose-driven tokens that reference primitive tokens
- **Component Tokens**: Component-specific tokens that reference semantic tokens
@@ -30,13 +32,13 @@ import { Aura } from 'primeng/themes/aura';
import { lfxPreset } from '@linuxfoundation/lfx-ui-core';
const customPreset = definePreset(Aura, {
- primitive: lfxPreset.primitive,
+ primitive: lfxPreset.primitive
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
- styleUrls: ['./app.component.css'],
+ styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private config: PrimeNGConfig) {
@@ -44,8 +46,8 @@ export class AppComponent {
preset: customPreset,
options: {
prefix: 'p',
- darkModeSelector: '.dark-mode',
- },
+ darkModeSelector: '.dark-mode'
+ }
});
}
}
@@ -63,17 +65,20 @@ The tokens are strongly typed, providing autocomplete support and type safety in
### Development Setup
1. Clone the repository:
+
```bash
git clone https://github.com/linuxfoundation/lfx-ui
cd lfx-ui-core
```
2. Install dependencies:
+
```bash
npm ci
```
3. Build the tokens:
+
```bash
npm run build
```
@@ -83,6 +88,7 @@ npm run build
1. The source tokens are defined in `src/design/tokens/tokens.json`
2. Modify the tokens file according to your needs, or update it in Figma using Tokens Studio
3. Run the build script to generate updated token files:
+
```bash
npm run build
```
@@ -90,6 +96,7 @@ npm run build
### Release Process
1. Create a new version tag following semver conventions:
+
```bash
git tag v1.0.0
git push origin v1.0.0
@@ -107,3 +114,21 @@ git push origin v1.0.0
- Add comments to explain complex token relationships
- Test tokens in a real application before releasing
+## Components
+
+### Footer Component
+
+The package includes a customizable footer web component that can be used in any web application.
+
+#### Usage
+
+```html
+
+
+```
+
+```typescript
+// In your TypeScript/JavaScript file
+// For Angular, import it in your main module
+import '@linuxfoundation/lfx-ui-core';
+```
diff --git a/package.json b/package.json
index 66feb55..64611f2 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "@linuxfoundation/lfx-ui-core",
"version": "0.0.0",
- "description": "LFX UI Core Configurations",
+ "description": "LFX UI Core Configurations and Components",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {
@@ -20,6 +20,11 @@
"prettier": "^3.0.0",
"@types/prettier": "^3.0.0"
},
+ "peerDependenciesMeta": {
+ "prettier": {
+ "optional": true
+ }
+ },
"publishConfig": {
"registry": "https://registry.npmjs.org/",
"access": "public"
diff --git a/src/components/footer/footer.component.ts b/src/components/footer/footer.component.ts
new file mode 100644
index 0000000..8a702ba
--- /dev/null
+++ b/src/components/footer/footer.component.ts
@@ -0,0 +1,115 @@
+export class LFXFooter extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({ mode: 'open' });
+ }
+
+ private getTemplate(): string {
+ return `
+
+
+
+ `;
+ }
+
+ 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/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..f830aa4
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1 @@
+export * from './footer/footer.component';
diff --git a/src/scripts/build.ts b/src/scripts/build.ts
index c634d9f..60f6d1b 100644
--- a/src/scripts/build.ts
+++ b/src/scripts/build.ts
@@ -45,8 +45,7 @@ function generatePrimitiveTokens(tokens: TokenGroup): string {
return `${generateTokenImports()}
export const primitiveTokens = ${generateTokenObject(primitiveTokens as TokenGroup)} as const;
-export type PrimitiveTokens = typeof primitiveTokens;
-`;
+export type PrimitiveTokens = typeof primitiveTokens;`;
}
function generateSemanticTokens(tokens: TokenGroup): string {
@@ -56,8 +55,7 @@ import { primitiveTokens } from './primitive.tokens';
export const semanticTokens = ${generateTokenObject(semanticTokens as TokenGroup)} as const;
-export type SemanticTokens = typeof semanticTokens;
-`;
+export type SemanticTokens = typeof semanticTokens;`;
}
function generateComponentTokens(tokens: TokenGroup): string {
@@ -67,8 +65,7 @@ import { semanticTokens } from './semantic.tokens';
export const componentTokens = ${generateTokenObject(componentTokens as TokenGroup)} as const;
-export type ComponentTokens = typeof componentTokens;
-`;
+export type ComponentTokens = typeof componentTokens;`;
}
function generateLFXPreset(): string {
@@ -82,19 +79,17 @@ export const lfxPreset = {
semantic: semanticTokens,
} as const;
-export type LFXPreset = typeof lfxPreset;
-`;
+export type LFXPreset = typeof lfxPreset;`;
}
function generatePresetsIndex(): string {
- return `export * from './lfx.preset';
-`;
+ return `export * from './lfx.preset';`;
}
function generateIndex(): string {
return `export * from './design/presets';
export * from './core/prettier-config';
-`;
+export * from './components';`;
}
async function buildTokens() {