[WEB-4100] New Footer component for refreshed nav #2374
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThe pull request involves a comprehensive refactoring of the footer components and related configurations. Multiple files related to the footer have been removed, including YAML configuration files, React components for footer navigation, and associated utility files. A new Changes
Assessment against linked issues
Poem
Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![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 (1)
src/components/Layout/Footer.tsx (1)
53-67: Consider extracting link rendering logic.The link rendering logic could be extracted into a separate component for better reusability and maintainability.
+const FooterLinkSet: React.FC<{ links: Array<{ label: string; link: string }> }> = ({ links }) => ( + <div className="flex gap-20"> + {links.map((link) => ( + <a + key={link.label} + href={link.link} + className="ui-text-menu4 text-neutral-900 hover:text-neutral-1300 dark:text-neutral-400 dark:hover:text-neutral-000 transition-colors" + > + {link.label} + </a> + ))} + </div> +); <div className="flex justify-between w-full flex-col lg:flex-row px-24 lg:px-0 my-24 gap-24"> - {[leftFooterLinks, rightFooterLinks].map((links, index) => ( - <div key={`link-set-${index}`} className="flex gap-20"> - {links.map((link) => ( - <a - key={link.label} - href={link.link} - className="ui-text-menu4 text-neutral-900 hover:text-neutral-1300 dark:text-neutral-400 dark:hover:text-neutral-000 transition-colors" - > - {link.label} - </a> - ))} - </div> - ))} + <FooterLinkSet links={leftFooterLinks} /> + <FooterLinkSet links={rightFooterLinks} /> </div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
src/components/Footer/FooterTopNav/images/ably-logo.pngis excluded by!**/*.pngyarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (19)
data/yaml/page-furniture/README.md(0 hunks)data/yaml/page-furniture/footerBottomMenu.yaml(0 hunks)data/yaml/page-furniture/footerMenu.yaml(0 hunks)gatsby-config.ts(0 hunks)package.json(1 hunks)src/components/Footer/Footer.tsx(0 hunks)src/components/Footer/FooterBottomNav.tsx(0 hunks)src/components/Footer/FooterTopNav.tsx(0 hunks)src/components/Footer/FooterTopNav/FooterLogo.tsx(0 hunks)src/components/Footer/FooterTopNav/FooterMenu/FooterMenu.tsx(0 hunks)src/components/Footer/FooterTopNav/FooterMenu/FooterMenuContainer.tsx(0 hunks)src/components/Footer/FooterTopNav/FooterSocial/FooterSocialMenu.tsx(0 hunks)src/components/Footer/FooterTopNav/FooterSocial/FooterSocialMenuIcons.tsx(0 hunks)src/components/Footer/FooterTopNav/FooterStatus.tsx(0 hunks)src/components/Footer/data.ts(0 hunks)src/components/Footer/index.ts(0 hunks)src/components/Layout/Footer.tsx(1 hunks)src/components/Layout/Layout.tsx(2 hunks)src/components/index.ts(0 hunks)
💤 Files with no reviewable changes (16)
- src/components/index.ts
- src/components/Footer/FooterTopNav/FooterSocial/FooterSocialMenuIcons.tsx
- data/yaml/page-furniture/footerBottomMenu.yaml
- src/components/Footer/index.ts
- src/components/Footer/data.ts
- data/yaml/page-furniture/footerMenu.yaml
- src/components/Footer/FooterTopNav/FooterLogo.tsx
- src/components/Footer/FooterTopNav/FooterSocial/FooterSocialMenu.tsx
- src/components/Footer/FooterTopNav/FooterStatus.tsx
- src/components/Footer/FooterTopNav.tsx
- src/components/Footer/FooterBottomNav.tsx
- gatsby-config.ts
- src/components/Footer/Footer.tsx
- data/yaml/page-furniture/README.md
- src/components/Footer/FooterTopNav/FooterMenu/FooterMenu.tsx
- src/components/Footer/FooterTopNav/FooterMenu/FooterMenuContainer.tsx
🔇 Additional comments (3)
src/components/Layout/Layout.tsx (1)
12-12: LGTM! Footer integration looks good.The changes correctly integrate the new Footer component within the layout structure. The placement inside the Container component ensures consistent margins and spacing.
Also applies to: 30-30
src/components/Layout/Footer.tsx (1)
12-17: Review duplicate privacy link.The 'Cookies' link points to the same URL as 'Privacy' ('/privacy'). Should this be a separate page for cookie policy?
package.json (1)
42-42: Verify @ably/ui version compatibility.The update from 15.1.9 to 15.1.14 is a patch version change. Please ensure all used components are compatible with this version.
Run this script to check for any breaking changes or deprecation notices:
✅ Verification successful
@ably/ui version update is safe to proceed
The codebase uses stable core components and utilities from @ably/ui that are unlikely to have breaking changes in a patch version update (15.1.9 to 15.1.14). The main usage includes Icon, Badge, Accordion, and core utilities which are fundamental components of the library.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for breaking changes in @ably/ui between versions # Get the changelog or release notes gh release view v15.1.14 --repo ably/ably-ui # Check for any issues related to these versions gh issue list --repo ably/ably-ui --search "15.1.9..15.1.14 in:title,body"Length of output: 141
Script:
#!/bin/bash # Find all files importing from @ably/ui and show the import statements rg --type js --type jsx --type ts --type tsx "from ['|\"]@ably/ui['\"]|from ['|\"]@ably/ui/.+['|\"]" -B 0 -A 0 # Find actual usage of components from @ably/ui ast-grep --pattern 'import { $$$ } from "@ably/ui"'Length of output: 202
Script:
#!/bin/bash # Find all imports from @ably/ui with any pattern rg "from ['\"]@ably/ui" --type-add 'frontend:*.{js,jsx,ts,tsx}' --type frontend # Find files containing @ably/ui string to catch any other usage patterns rg "@ably/ui" --type-add 'frontend:*.{js,jsx,ts,tsx}' --type frontendLength of output: 13983
jamiehenson
force-pushed
the
web-4100-footer
branch
from
d2e43bd to
0e32622
Compare
jamiehenson
force-pushed
the
web-4100-footer
branch
from
0e32622 to
21e60e9
Compare
|
Couldn't have said it better myself @kennethkalmer |
jamiehenson
force-pushed
the
web-4100-footer
branch
from
21e60e9 to
fe454e4
Compare
This pull request involves significant changes to the footer component and the removal of YAML data files related to the footer menu. The changes include the complete removal of several components and the addition of a new footer implementation.
Review link: https://ably-docs-web-4100-foot-yfmz2j.herokuapp.com/
Removal of old footer components and YAML data:
data/yaml/page-furniture/footerBottomMenu.yaml: Removed the entire file containing footer bottom menu data.data/yaml/page-furniture/footerMenu.yaml: Removed the entire file containing footer menu data.src/components/Footer/Footer.tsx: Removed the old footer component and its associated GraphQL queries.src/components/Footer/FooterBottomNav.tsx: Removed the footer bottom navigation component.src/components/Footer/FooterTopNav.tsx: Removed the footer top navigation component.src/components/Footer/FooterTopNav/FooterLogo.tsx: Removed the footer logo component.src/components/Footer/FooterTopNav/FooterMenu/FooterMenu.tsx: Removed the footer menu component.src/components/Footer/FooterTopNav/FooterMenu/FooterMenuContainer.tsx: Removed the footer menu container component.src/components/Footer/FooterTopNav/FooterSocial/FooterSocialMenu.tsx: Removed the footer social menu component.src/components/Footer/FooterTopNav/FooterSocial/FooterSocialMenuIcons.tsx: Removed the footer social menu icons component.src/components/Footer/FooterTopNav/FooterStatus.tsx: Removed the footer status component.src/components/Footer/data.ts: Removed the social links data.src/components/Footer/index.ts: Removed the footer export.Addition of new footer implementation:
src/components/Layout/Footer.tsx: Added a new footer component with updated links and social media icons.src/components/Layout/Layout.tsx: Integrated the new footer component into the layout. [1] [2]Dependency updates:
package.json: Updated the@ably/uidependency version from15.1.9to15.1.14.Configuration updates:
gatsby-config.ts: Removed thegatsby-source-filesystemconfiguration for theyaml-page-furnituredata source.Summary by CodeRabbit
Release Notes
Removed Components
New Features
Dependency Updates
@ably/uipackage from version 15.1.9 to 15.1.14Configuration Changes