Skip to content

Commit afe9da4

Browse files
asithadeasithade
authored
feat: added cookie consent to footer component (#20)
* feat: added cookie consent to footer component Signed-off-by: Asitha de Silva <[email protected]> * fix: error handling of script load Signed-off-by: Asitha de Silva <[email protected]> --------- Signed-off-by: Asitha de Silva <[email protected]>
1 parent 5ace77b commit afe9da4

File tree

7 files changed

+376
-6
lines changed

7 files changed

+376
-6
lines changed

‎.vscode/settings.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
},
2424
"cSpell.words": [
2525
"csspart",
26-
"cssproperty"
26+
"cssproperty",
27+
"Osano"
2728
]
2829
}

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,9 @@ npm install @linuxfoundation/lfx-ui-core
2626
- [Design Tokens](docs/design-tokens.md)
2727
- [Prettier Configuration](docs/prettier-config.md)
2828
- Components
29+
- [Components Overview](docs/components.md)
2930
- [Footer Component](docs/footer.md)
31+
- [Tools Component](docs/tools.md)
3032

3133
## Contributing
3234

‎docs/components.md‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
# LFX UI Core Components
2+
3+
This document provides an overview of all available components in the LFX UI Core package.
4+
5+
## Available Components
6+
7+
### Footer Component (`lfx-footer`)
8+
9+
A comprehensive footer component that provides consistent copyright and legal information across LFX applications.
10+
11+
**Key Features:**
12+
13+
- **Cookie Consent Integration**: Optional Osano cookie consent script loading
14+
- **Extensive Customization**: CSS custom properties for complete theming
15+
- **Accessibility**: Built-in accessibility features and semantic HTML
16+
- **Responsive Design**: Mobile-optimized with responsive breakpoints
17+
- **CSS Parts**: Fine-grained styling control with CSS parts
18+
19+
**Usage:**
20+
21+
```html
22+
<!-- Basic usage -->
23+
<lfx-footer></lfx-footer>
24+
25+
<!-- With cookie tracking enabled -->
26+
<lfx-footer cookie-tracking></lfx-footer>
27+
28+
<!-- With custom styling -->
29+
<lfx-footer style="--lfx-footer-bg: #f8f9fa; --lfx-footer-padding: 2rem;" cookie-tracking></lfx-footer>
30+
```
31+
32+
**Documentation:** [Footer Component](footer.md)
33+
34+
### Tools Component (`lfx-tools`)
35+
36+
A tools menu component that provides a grid icon button that opens a dropdown menu with various LFX tools and applications.
37+
38+
**Key Features:**
39+
40+
- **Dynamic Menu**: Configurable menu structure with sections and items
41+
- **Font Awesome Integration**: Support for Font Awesome Pro icons
42+
- **Active State Management**: Automatic highlighting of current product
43+
- **Accessibility**: Proper ARIA attributes and keyboard navigation
44+
- **Customizable Styling**: CSS custom properties for theming
45+
46+
**Usage:**
47+
48+
```html
49+
<!-- Basic usage -->
50+
<lfx-tools></lfx-tools>
51+
52+
<!-- With Font Awesome kit -->
53+
<lfx-tools kit="your-kit-id"></lfx-tools>
54+
55+
<!-- With active product -->
56+
<lfx-tools product="lfx-insights"></lfx-tools>
57+
```
58+
59+
**Documentation:** [Tools Component](tools.md)
60+
61+
## Component Features Overview
62+
63+
| Feature | Footer | Tools |
64+
| --------------------- | ------ | ----- |
65+
| Cookie Tracking | ✅ | ❌ |
66+
| CSS Custom Properties | ✅ | ✅ |
67+
| CSS Parts | ✅ | ✅ |
68+
| Accessibility | ✅ | ✅ |
69+
| Responsive Design | ✅ | ✅ |
70+
| Framework Agnostic | ✅ | ✅ |
71+
| TypeScript Support | ✅ | ✅ |
72+
73+
## Installation and Setup
74+
75+
### Basic Installation
76+
77+
```bash
78+
npm install @linuxfoundation/lfx-ui-core
79+
```
80+
81+
### Import Components
82+
83+
```typescript
84+
// Import all components
85+
import '@linuxfoundation/lfx-ui-core';
86+
87+
// Or import individual components
88+
import '@linuxfoundation/lfx-ui-core/dist/components/footer';
89+
import '@linuxfoundation/lfx-ui-core/dist/components/tools';
90+
```
91+
92+
### Framework Integration
93+
94+
#### Angular
95+
96+
```typescript
97+
// In main.ts or app.module.ts
98+
import '@linuxfoundation/lfx-ui-core';
99+
```
100+
101+
#### Vue
102+
103+
```typescript
104+
// In main.js
105+
import '@linuxfoundation/lfx-ui-core';
106+
```
107+
108+
#### React
109+
110+
```typescript
111+
// In your main component or index file
112+
import '@linuxfoundation/lfx-ui-core';
113+
```
114+
115+
## Design System Integration
116+
117+
All components are built to work seamlessly with the LFX design system:
118+
119+
- **Design Tokens**: Components use semantic design tokens for consistent theming
120+
- **Theme Support**: Automatic integration with PrimeOne theme system
121+
- **Customization**: Extensive CSS custom properties for framework-specific theming
122+
- **Accessibility**: Built-in accessibility features following WCAG guidelines
123+
124+
## Development
125+
126+
### Storybook
127+
128+
Run Storybook to explore all components and their variations:
129+
130+
```bash
131+
npm run storybook
132+
```
133+
134+
Navigate to [http://localhost:6006](http://localhost:6006) to view the component library.
135+
136+
### Building
137+
138+
```bash
139+
npm run build
140+
```
141+
142+
### Testing
143+
144+
```bash
145+
npm test
146+
```
147+
148+
## Contributing
149+
150+
When adding new components:
151+
152+
1. Follow the established component structure and patterns
153+
2. Include comprehensive JSDoc documentation
154+
3. Create Storybook stories for all variations
155+
4. Add accessibility features and tests
156+
5. Update this documentation
157+
6. Follow the TypeScript and vanilla web component standards
158+
159+
## Browser Support
160+
161+
All components support:
162+
163+
- Chrome 88+
164+
- Firefox 85+
165+
- Safari 14+
166+
- Edge 88+
167+
168+
## License
169+
170+
MIT License - see [LICENSE](../LICENSE) for details.

‎docs/footer.md‎

Lines changed: 102 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Footer Component
22

3-
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.
3+
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.
44

55
## Basic Usage
66

@@ -52,6 +52,107 @@ Then, use the component in your HTML:
5252

5353
Example: [https://stackblitz.com/edit/vitejs-vite-vn2ysk?file=index.html](https://stackblitz.com/edit/vitejs-vite-vn2ysk?file=index.html)
5454

55+
## Features
56+
57+
### Cookie Consent Integration
58+
59+
The footer component can automatically load the Osano cookie consent script when the `cookie-tracking` attribute is present:
60+
61+
```html
62+
<!-- Enable cookie tracking (boolean attribute pattern) -->
63+
<lfx-footer cookie-tracking></lfx-footer>
64+
65+
<!-- Enable cookie tracking (explicit true) -->
66+
<lfx-footer cookie-tracking="true"></lfx-footer>
67+
68+
<!-- Disable cookie tracking (explicit false) -->
69+
<lfx-footer cookie-tracking="false"></lfx-footer>
70+
71+
<!-- Disable cookie tracking (no attribute) -->
72+
<lfx-footer></lfx-footer>
73+
```
74+
75+
**Important Notes:**
76+
77+
- The script will only be loaded once, even if multiple footer components have cookie tracking enabled
78+
- The script is loaded asynchronously for better performance
79+
- The component automatically handles script deduplication
80+
- Works in both browser and server-side rendering environments
81+
- Includes error handling for script loading failures
82+
83+
### Error Handling
84+
85+
The component provides error handling for script loading failures:
86+
87+
```javascript
88+
const footer = document.querySelector('lfx-footer');
89+
90+
footer.addEventListener('cookie-script-error', (event) => {
91+
console.error('Cookie script failed to load:', event.detail.error);
92+
// Implement fallback behavior if needed
93+
});
94+
```
95+
96+
**Error Event Details:**
97+
98+
- `event.detail.scriptSrc`: The script URL that failed to load
99+
- `event.detail.error`: Error description
100+
101+
### Framework-Specific Cookie Tracking
102+
103+
#### Angular
104+
105+
```typescript
106+
// In your component template
107+
<lfx-footer [attr.cookie-tracking]="enableCookieTracking"></lfx-footer>
108+
109+
// In your component class
110+
export class AppComponent {
111+
enableCookieTracking = true;
112+
}
113+
```
114+
115+
#### Vue
116+
117+
```vue
118+
<template>
119+
<lfx-footer :cookie-tracking="enableCookieTracking" />
120+
</template>
121+
122+
<script>
123+
export default {
124+
data() {
125+
return {
126+
enableCookieTracking: true,
127+
};
128+
},
129+
};
130+
</script>
131+
```
132+
133+
#### React
134+
135+
```jsx
136+
function App() {
137+
const [enableCookieTracking, setEnableCookieTracking] = useState(true);
138+
139+
return <lfx-footer cookie-tracking={enableCookieTracking} />;
140+
}
141+
```
142+
143+
## Attributes
144+
145+
| Attribute | Type | Description | Default |
146+
| ----------------- | ------- | ------------------------------------------ | ------- |
147+
| `cookie-tracking` | boolean | Enable Osano cookie consent script loading | `false` |
148+
149+
**Boolean Attribute Behavior:**
150+
151+
- `cookie-tracking` (no value) = enabled
152+
- `cookie-tracking="true"` = enabled
153+
- `cookie-tracking="false"` = disabled
154+
- No attribute = disabled
155+
55156
## Styling and Customization
56157

57158
The footer component is highly customizable using CSS custom properties. Here are the available styling options:

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@linuxfoundation/lfx-ui-core",
3-
"version": "0.0.17-alpha.2",
3+
"version": "0.0.0",
44
"description": "LFX UI Core Configurations and Components",
55
"main": "dist/index.js",
66
"types": "dist/index.d.ts",

0 commit comments

Comments
 (0)