From b47b5568db53ce9b5e7e2bd61a6b8c890cc91674 Mon Sep 17 00:00:00 2001 From: Asitha de Silva Date: Tue, 26 Nov 2024 12:12:57 -0800 Subject: [PATCH] feat: shared footer (#1) * feat: shared footer Signed-off-by: Asitha de Silva * revert package version Signed-off-by: Asitha de Silva --------- Signed-off-by: Asitha de Silva --- .github/CODEOWNERS | 1 + README.md | 35 ++++++- package.json | 7 +- src/components/footer/footer.component.ts | 115 ++++++++++++++++++++++ src/components/index.ts | 1 + src/scripts/build.ts | 17 ++-- 6 files changed, 159 insertions(+), 17 deletions(-) create mode 100644 .github/CODEOWNERS create mode 100644 src/components/footer/footer.component.ts create mode 100644 src/components/index.ts 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 ` + + +
+
+
+ Privacy Policy + | + Trademark Usage +
+
+

Copyright © ${new Date().getFullYear()} The Linux Foundation®. All rights reserved. + The Linux Foundation has registered trademarks and uses trademarks.

+

For more information, including terms of use, privacy policy, + and trademark usage, please see our Policies page. +

+
+
+
+ `; + } + + 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() {