feat: added cookie consent to footer component

.vscode/settings.json

@@ -23,6 +23,7 @@
   },
   "cSpell.words": [
     "csspart",
-    "cssproperty"
+    "cssproperty",
+    "Osano"
   ]
 }

README.md

@@ -26,7 +26,9 @@ npm install @linuxfoundation/lfx-ui-core
   - [Design Tokens](docs/design-tokens.md)
   - [Prettier Configuration](docs/prettier-config.md)
 - Components
+  - [Components Overview](docs/components.md)
   - [Footer Component](docs/footer.md)
+  - [Tools Component](docs/tools.md)
 
 ## Contributing
 

docs/components.md

@@ -0,0 +1,170 @@
+# LFX UI Core Components
+
+This document provides an overview of all available components in the LFX UI Core package.
+
+## Available Components
+
+### Footer Component (`lfx-footer`)
+
+A comprehensive footer component that provides consistent copyright and legal information across LFX applications.
+
+**Key Features:**
+
+- **Cookie Consent Integration**: Optional Osano cookie consent script loading
+- **Extensive Customization**: CSS custom properties for complete theming
+- **Accessibility**: Built-in accessibility features and semantic HTML
+- **Responsive Design**: Mobile-optimized with responsive breakpoints
+- **CSS Parts**: Fine-grained styling control with CSS parts
+
+**Usage:**
+
+```html
+<!-- Basic usage -->
+<lfx-footer></lfx-footer>
+
+<!-- With cookie tracking enabled -->
+<lfx-footer cookie-tracking></lfx-footer>
+
+<!-- With custom styling -->
+<lfx-footer style="--lfx-footer-bg: #f8f9fa; --lfx-footer-padding: 2rem;" cookie-tracking></lfx-footer>
+```
+
+**Documentation:** [Footer Component](footer.md)
+
+### Tools Component (`lfx-tools`)
+
+A tools menu component that provides a grid icon button that opens a dropdown menu with various LFX tools and applications.
+
+**Key Features:**
+
+- **Dynamic Menu**: Configurable menu structure with sections and items
+- **Font Awesome Integration**: Support for Font Awesome Pro icons
+- **Active State Management**: Automatic highlighting of current product
+- **Accessibility**: Proper ARIA attributes and keyboard navigation
+- **Customizable Styling**: CSS custom properties for theming
+
+**Usage:**
+
+```html
+<!-- Basic usage -->
+<lfx-tools></lfx-tools>
+
+<!-- With Font Awesome kit -->
+<lfx-tools kit="your-kit-id"></lfx-tools>
+
+<!-- With active product -->
+<lfx-tools product="lfx-insights"></lfx-tools>
+```
+
+**Documentation:** [Tools Component](tools.md)
+
+## Component Features Overview
+
+| Feature               | Footer | Tools |
+| --------------------- | ------ | ----- |
+| Cookie Tracking       | ✅     | ❌    |
+| CSS Custom Properties | ✅     | ✅    |
+| CSS Parts             | ✅     | ✅    |
+| Accessibility         | ✅     | ✅    |
+| Responsive Design     | ✅     | ✅    |
+| Framework Agnostic    | ✅     | ✅    |
+| TypeScript Support    | ✅     | ✅    |
+
+## Installation and Setup
+
+### Basic Installation
+
+```bash
+npm install @linuxfoundation/lfx-ui-core
+```
+
+### Import Components
+
+```typescript
+// Import all components
+import '@linuxfoundation/lfx-ui-core';
+
+// Or import individual components
+import '@linuxfoundation/lfx-ui-core/dist/components/footer';
+import '@linuxfoundation/lfx-ui-core/dist/components/tools';
+```
+
+### Framework Integration
+
+#### Angular
+
+```typescript
+// In main.ts or app.module.ts
+import '@linuxfoundation/lfx-ui-core';
+```
+
+#### Vue
+
+```typescript
+// In main.js
+import '@linuxfoundation/lfx-ui-core';
+```
+
+#### React
+
+```typescript
+// In your main component or index file
+import '@linuxfoundation/lfx-ui-core';
+```
+
+## Design System Integration
+
+All components are built to work seamlessly with the LFX design system:
+
+- **Design Tokens**: Components use semantic design tokens for consistent theming
+- **Theme Support**: Automatic integration with PrimeOne theme system
+- **Customization**: Extensive CSS custom properties for framework-specific theming
+- **Accessibility**: Built-in accessibility features following WCAG guidelines
+
+## Development
+
+### Storybook
+
+Run Storybook to explore all components and their variations:
+
+```bash
+npm run storybook
+```
+
+Navigate to [http://localhost:6006](http://localhost:6006) to view the component library.
+
+### Building
+
+```bash
+npm run build
+```
+
+### Testing
+
+```bash
+npm test
+```
+
+## Contributing
+
+When adding new components:
+
+1. Follow the established component structure and patterns
+2. Include comprehensive JSDoc documentation
+3. Create Storybook stories for all variations
+4. Add accessibility features and tests
+5. Update this documentation
+6. Follow the TypeScript and vanilla web component standards
+
+## Browser Support
+
+All components support:
+
+- Chrome 88+
+- Firefox 85+
+- Safari 14+
+- Edge 88+
+
+## License
+
+MIT License - see [LICENSE](../LICENSE) for details.

docs/footer.md

@@ -1,6 +1,6 @@
 # Footer Component
 
-The footer component provides a consistent bottom section for your application with comprehensive styling options. Here's how to implement and customize it across different frameworks.
+The footer component provides a consistent bottom section for your application with comprehensive styling options and optional cookie consent script integration. Here's how to implement and customize it across different frameworks.
 
 ## Basic Usage
 
@@ -52,6 +52,107 @@ Then, use the component in your HTML:
 
 Example: [https://stackblitz.com/edit/vitejs-vite-vn2ysk?file=index.html](https://stackblitz.com/edit/vitejs-vite-vn2ysk?file=index.html)
 
+## Features
+
+### Cookie Consent Integration
+
+The footer component can automatically load the Osano cookie consent script when the `cookie-tracking` attribute is present:
+
+```html
+<!-- Enable cookie tracking (boolean attribute pattern) -->
+<lfx-footer cookie-tracking></lfx-footer>
+
+<!-- Enable cookie tracking (explicit true) -->
+<lfx-footer cookie-tracking="true"></lfx-footer>
+
+<!-- Disable cookie tracking (explicit false) -->
+<lfx-footer cookie-tracking="false"></lfx-footer>
+
+<!-- Disable cookie tracking (no attribute) -->
+<lfx-footer></lfx-footer>
+```
+
+**Important Notes:**
+
+- The script will only be loaded once, even if multiple footer components have cookie tracking enabled
+- The script is loaded asynchronously for better performance
+- The component automatically handles script deduplication
+- Works in both browser and server-side rendering environments
+- Includes error handling for script loading failures
+
+### Error Handling
+
+The component provides error handling for script loading failures:
+
+```javascript
+const footer = document.querySelector('lfx-footer');
+
+footer.addEventListener('cookie-script-error', (event) => {
+  console.error('Cookie script failed to load:', event.detail.error);
+  // Implement fallback behavior if needed
+});
+```
+
+**Error Event Details:**
+
+- `event.detail.scriptSrc`: The script URL that failed to load
+- `event.detail.error`: Error description
+
+### Framework-Specific Cookie Tracking
+
+#### Angular
+
+```typescript
+// In your component template
+<lfx-footer [attr.cookie-tracking]="enableCookieTracking"></lfx-footer>
+
+// In your component class
+export class AppComponent {
+  enableCookieTracking = true;
+}
+```
+
+#### Vue
+
+```vue
+<template>
+  <lfx-footer :cookie-tracking="enableCookieTracking" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      enableCookieTracking: true,
+    };
+  },
+};
+</script>
+```
+
+#### React
+
+```jsx
+function App() {
+  const [enableCookieTracking, setEnableCookieTracking] = useState(true);
+
+  return <lfx-footer cookie-tracking={enableCookieTracking} />;
+}
+```
+
+## Attributes
+
+| Attribute         | Type    | Description                                | Default |
+| ----------------- | ------- | ------------------------------------------ | ------- |
+| `cookie-tracking` | boolean | Enable Osano cookie consent script loading | `false` |
+
+**Boolean Attribute Behavior:**
+
+- `cookie-tracking` (no value) = enabled
+- `cookie-tracking="true"` = enabled
+- `cookie-tracking="false"` = disabled
+- No attribute = disabled
+
 ## Styling and Customization
 
 The footer component is highly customizable using CSS custom properties. Here are the available styling options:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linuxfoundation/lfx-ui-core",
-  "version": "0.0.17-alpha.2",
+  "version": "0.0.0",
   "description": "LFX UI Core Configurations and Components",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",