feat: shared footer (#1)

* feat: shared footer Signed-off-by: Asitha de Silva <[email protected]> * revert package version Signed-off-by: Asitha de Silva <[email protected]> --------- Signed-off-by: Asitha de Silva <[email protected]>
linuxfoundation · Nov 26, 2024 · b47b556 · b47b556
1 parent 639d9e3
commit b47b556
Show file tree

Hide file tree

Showing 6 changed files with 159 additions and 17 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -0,0 +1 @@
+@asithade
diff --git 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,22 +32,22 @@ 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) {
     this.config.theme.set({
       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,13 +88,15 @@ 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
 ```
 
 ### 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
+<!-- In your HTML file -->
+<lfx-footer></lfx-footer>
+```
+
+```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
@@ -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
@@ -0,0 +1,115 @@
+export class LFXFooter extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  private getTemplate(): string {
+    return `
+      <style>
+        :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;
+        }
+
+        .footer-links {
+          display: flex;
+          gap: 1rem;
+          color: #808b91
+          font-size: 0.75rem;
+        }
+
+        .footer-links a {
+          color: #5b6367;
+          text-decoration: none;
+          font-size: 0.75rem;
+        }
+
+        .footer-links a:hover {
+          text-decoration: underline;
+          color: #5b6367;
+        }
+
+        .copyright-container {
+          display: flex;
+          flex-direction: column;
+        }
+
+        .copyright {
+          font-size: 0.75rem;
+        }
+
+        .copyright a {
+          color: #5b6367;
+        }
+
+        .copyright a:hover {
+          text-decoration: underline;
+          color: #5b6367;
+        }
+
+      </style>
+
+      <div class="footer-container">
+        <div class="footer-content">
+          <div class="footer-links">
+            <a href="https://www.linuxfoundation.org/legal/privacy-policy?hsLang=en">Privacy Policy</a>
+            <span>|</span>
+            <a href="https://www.linuxfoundation.org/legal/trademark-usage?hsLang=en">Trademark Usage</a>
+          </div>
+          <div class="copyright-container">
+            <p class="copyright">Copyright &copy; ${new Date().getFullYear()} The Linux Foundation&reg;. All rights reserved.
+            The Linux Foundation has registered trademarks and uses trademarks.</p>
+            <p class="copyright">For more information, including terms of use, privacy policy,
+            and trademark usage, please see our <a href="https://www.linuxfoundation.org/legal/policies">Policies</a> page.
+            </p>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  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
@@ -0,0 +1 @@
+export * from './footer/footer.component';
diff --git 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() {