feat: added cookie consent to footer component #20
Conversation
Signed-off-by: Asitha de Silva <[email protected]>
WalkthroughThe changes introduce optional Osano cookie consent integration to the footer web component via a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant LFXFooterComponent
participant Document
User->>LFXFooterComponent: Add <lfx-footer cookie-tracking>
LFXFooterComponent->>LFXFooterComponent: connectedCallback()
alt cookie-tracking attribute present
LFXFooterComponent->>LFXFooterComponent: _handleCookieTracking()
LFXFooterComponent->>Document: Check for Osano script
alt Script not present
LFXFooterComponent->>Document: Append Osano script asynchronously
else Script already present
LFXFooterComponent-->>Document: Do nothing
end
end
✨ Finishing Touches
🧪 Generate Unit Tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Pull Request Overview
This PR introduces cookie consent integration to the LFX UI Core Footer component along with updated Storybook stories, documentation updates, and a new Tools menu component.
- Added cookie consent support via the new cookie-tracking attribute in the Footer component.
- Updated Storybook stories and documentation to demonstrate and explain the new feature.
- Updated the package version and miscellaneous project files.
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/footer/footer.stories.ts | Updated Storybook stories to include cookie-tracking configuration |
| src/components/footer/footer.component.ts | Added cookie consent integration logic with the cookie-tracking attribute |
| package.json | Package version reset for release preparation |
| docs/footer.md | Expanded documentation to include cookie consent integration details |
| docs/components.md | Added new Tools component documentation |
| README.md | Updated component documentation links |
| .vscode/settings.json | Updated spell-check settings with "Osano" |
Comments suppressed due to low confidence (1)
src/components/footer/footer.component.ts:84
- When the cookie-tracking attribute is present with a value of 'false', the Osano script will still be appended since the logic only checks for attribute presence. Consider parsing the attribute value as a boolean to allow explicit disabling when set to 'false'.
if (this.hasAttribute('cookie-tracking')) {
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
docs/footer.md (2)
3-3: Fix missing comma for better readability.Static analysis detected a potential missing comma that would improve readability.
-The footer component provides a consistent bottom section for your application with comprehensive styling options and optional cookie consent script integration. +The footer component provides a consistent bottom section for your application, with comprehensive styling options and optional cookie consent script integration.
77-77: Add missing period at end of sentence.Static analysis detected a missing period at the end of a sentence.
-- Works in both browser and server-side rendering environments +- Works in both browser and server-side rendering environments.src/components/footer/footer.component.ts (1)
30-30: Consider making the Osano script URL configurable.The hardcoded Osano script URL limits flexibility for different environments or customer configurations. Consider making this configurable through an attribute or property.
-private static readonly OSANO_SCRIPT_SRC = 'https://cmp.osano.com/16A0DbT9yDNIaQkvZ/d6ac078e-c71f-4b96-8c97-818cc1cc6632/osano.js?variant=two'; +private static readonly DEFAULT_OSANO_SCRIPT_SRC = 'https://cmp.osano.com/16A0DbT9yDNIaQkvZ/d6ac078e-c71f-4b96-8c97-818cc1cc6632/osano.js?variant=two'; + +private get osanoScriptSrc(): string { + return this.getAttribute('osano-script-src') || LFXFooter.DEFAULT_OSANO_SCRIPT_SRC; +}This would allow users to override the script URL when needed:
<lfx-footer cookie-tracking osano-script-src="custom-url"></lfx-footer>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
.vscode/settings.json(1 hunks)README.md(1 hunks)docs/components.md(1 hunks)docs/footer.md(2 hunks)package.json(1 hunks)src/components/footer/footer.component.ts(2 hunks)src/components/footer/footer.stories.ts(6 hunks)
🧰 Additional context used
🪛 LanguageTool
docs/footer.md
[uncategorized] ~3-~3: Possible missing comma found.
Context: ...es a consistent bottom section for your application with comprehensive styling options and ...
(AI_HYDRA_LEO_MISSING_COMMA)
[uncategorized] ~77-~77: A period might be missing here.
Context: ... both browser and server-side rendering environments ### Framework-Specific Cookie Tracking...
(AI_EN_LECTOR_MISSING_PUNCTUATION_PERIOD)
🔇 Additional comments (18)
package.json (1)
3-3: LGTM: Version reset for initial release.The version reset to
0.0.0aligns with the PR objective of preparing for an initial release.README.md (1)
29-31: LGTM: Documentation structure enhanced.The addition of "Components Overview" and "Tools Component" documentation links improves the README structure and aligns with the expanded documentation mentioned in the PR objectives.
.vscode/settings.json (1)
26-27: LGTM: Spell checker dictionary updated.Adding "Osano" to the spell checker dictionary is appropriate given the new Osano cookie consent integration.
docs/footer.md (1)
55-126: Excellent comprehensive documentation for cookie consent feature.The documentation thoroughly covers the new cookie tracking functionality with clear examples for multiple frameworks, important implementation notes, and proper attribute documentation. This will help developers understand and implement the feature correctly.
src/components/footer/footer.component.ts (3)
24-25: LGTM: Clear JSDoc documentation for new attribute.The JSDoc documentation clearly describes the new
cookie-trackingattribute functionality.
38-46: LGTM: Proper attribute observation and change handling.The implementation correctly uses
observedAttributesandattributeChangedCallbackto handle dynamic attribute changes, ensuring the cookie tracking behavior updates when the attribute is modified after initial render.
78-87: LGTM: Good integration of cookie tracking in component lifecycle.The cookie tracking is properly integrated into the
connectedCallbackand uses a dedicated private method for clean separation of concerns.src/components/footer/footer.stories.ts (5)
8-9: LGTM! Proper TypeScript interface extension.The interface correctly extends
FooterCSSPropsto include the newcookie-trackingboolean attribute alongside existing CSS custom properties. The comment update accurately reflects the expanded scope.Also applies to: 17-17
31-35: Excellent documentation enhancement.The new Features section clearly highlights the cookie tracking capability and other key features. This provides valuable context for developers using the component.
56-60: Well-configured Storybook controls.The
argTypesconfiguration forcookie-trackingproperly categorizes it as an attribute with appropriate boolean control and clear description. The table categorization helps organize the controls panel effectively.
106-106: Correct Lit HTML boolean attribute binding.The
?cookie-trackingsyntax properly binds the boolean attribute conditionally based on the story args, following Lit HTML best practices.
120-137: Comprehensive cookie tracking story.The new
WithCookieTrackingstory effectively demonstrates the feature with clear documentation explaining the behavior, including the important note about script deduplication across multiple footer instances.docs/components.md (6)
21-30: Excellent usage examples.The HTML examples clearly demonstrate basic usage, cookie tracking enablement, and custom styling. The progression from simple to complex usage is well-structured and educational.
63-72: Clear feature comparison table.The feature matrix effectively summarizes component capabilities, making it easy for developers to understand what each component offers. The use of checkmarks and X marks provides clear visual distinction.
94-113: Comprehensive framework integration examples.The framework integration examples for Angular, Vue, and React provide clear guidance for developers working in different environments. The import statements are consistent and practical.
149-158: Well-defined contribution guidelines.The contributing section provides clear steps for adding new components, emphasizing important aspects like documentation, testing, accessibility, and adherence to standards.
32-32: Verify documentation file references.The documentation references
footer.mdandtools.mdfiles. Please confirm these files exist or update the links accordingly.#!/bin/bash # Description: Check if referenced documentation files exist # Expected: Find footer.md and tools.md files echo "Checking for referenced documentation files..." fd -t f "footer.md" docs/ fd -t f "tools.md" docs/ echo -e "\nListing all markdown files in docs directory..." fd -t f "*.md" docs/Also applies to: 59-59
88-89: Let’s confirm that the build output actually containsfooterandtoolsunderdist/components:#!/bin/bash echo "Listing all subdirectories in dist/components:" ls -1 dist/components echo -e "\nVerifying specific component folders:" for comp in footer tools; do if [ -d "dist/components/$comp" ]; then echo "✔ dist/components/$comp exists" else echo "✖ dist/components/$comp NOT found" fi done
Signed-off-by: Asitha de Silva <[email protected]>
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
src/components/footer/footer.component.ts (1)
94-130: Robust script injection implementation.The script injection method is well-implemented with:
- SSR compatibility check
- Script deduplication to prevent multiple loads
- Proper error handling with custom event dispatch
- Fallback for script placement (head vs body)
This addresses all the concerns from the previous review comment about error handling.
🧹 Nitpick comments (2)
docs/footer.md (1)
3-3: Minor grammar improvement suggested.The static analysis tool identified a potential missing comma in the description. Consider adding a comma for better readability.
-The footer component provides a consistent bottom section for your application with comprehensive styling options and optional cookie consent script integration. +The footer component provides a consistent bottom section for your application, with comprehensive styling options and optional cookie consent script integration.src/components/footer/footer.component.ts (1)
32-32: Consider making the script URL configurable.The Osano script URL is currently hardcoded. For better flexibility and maintainability, consider making this configurable through an attribute or property.
- private static readonly OSANO_SCRIPT_SRC = 'https://cmp.osano.com/16A0DbT9yDNIaQkvZ/d6ac078e-c71f-4b96-8c97-818cc1cc6632/osano.js?variant=two'; + private static readonly DEFAULT_OSANO_SCRIPT_SRC = 'https://cmp.osano.com/16A0DbT9yDNIaQkvZ/d6ac078e-c71f-4b96-8c97-818cc1cc6632/osano.js?variant=two'; + + private get osanoScriptSrc(): string { + return this.getAttribute('cookie-script-src') || LFXFooter.DEFAULT_OSANO_SCRIPT_SRC; + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
docs/footer.md(2 hunks)src/components/footer/footer.component.ts(3 hunks)
🧰 Additional context used
🪛 LanguageTool
docs/footer.md
[uncategorized] ~3-~3: Possible missing comma found.
Context: ...es a consistent bottom section for your application with comprehensive styling options and ...
(AI_HYDRA_LEO_MISSING_COMMA)
[uncategorized] ~98-~98: Loose punctuation mark.
Context: ...t Details:** - event.detail.scriptSrc: The script URL that failed to load - `e...
(UNLIKELY_OPENING_PUNCTUATION)
🔇 Additional comments (5)
docs/footer.md (1)
55-155: Comprehensive cookie consent documentation.The documentation for the cookie consent integration is thorough and well-structured. It covers:
- Clear usage examples with different attribute patterns
- Important implementation notes about deduplication and performance
- Error handling with custom events
- Framework-specific integration examples
- Complete attribute reference
This provides developers with all the information needed to implement the feature correctly.
src/components/footer/footer.component.ts (4)
10-10: Documentation updated appropriately.The JSDoc description has been properly updated to reflect the new cookie consent integration capability.
24-27: Well-documented attribute and event.The JSDoc properly documents the new
cookie-trackingattribute andcookie-script-errorevent, providing clear information for developers using this component.
40-48: Proper attribute observation implementation.The implementation correctly observes the
cookie-trackingattribute and handles changes appropriately, ensuring the cookie tracking behavior can be toggled dynamically.
85-92: Correct boolean attribute handling.The boolean attribute handling properly follows web standards by treating both
'true'and empty string ('') as truthy values, which is the correct behavior for boolean attributes in HTML.
This pull request introduces significant enhancements to the LFX UI Core package, focusing on new components, improved documentation, and added functionality for cookie consent integration. The most important changes include the updates to the
Footercomponent to support Osano cookie consent integration, and comprehensive documentation updates.Component Enhancements:
Footer Component (
src/components/footer/footer.component.ts):cookie-trackingattribute. The script is loaded asynchronously and deduplicated across multiple instances. [1] [2]cookie-trackingas a configurable attribute. [1] [2] [3] [4] [5] [6]Tools Component (
docs/components.md):Toolsmenu component for displaying a dropdown menu with LFX tools and applications. Features include dynamic menu configuration, Font Awesome Pro integration, and accessibility enhancements.Documentation Updates:
Component Overview (
docs/components.md):FooterandToolscomponents, including their features, usage examples, and integration instructions for Angular, Vue, and React frameworks.Footer Component (
docs/footer.md):Other Changes:
Package Version Update (
package.json):0.0.0for initial release preparation.Miscellaneous Updates:
.vscode/settings.jsonto include "Osano" in the spell-check dictionary.README.mdwith links to new component documentation.