Expose As Is - PageHeader, LinkElement Prop & Logo #1184
Conversation
✅ Deploy Preview for veda-ui ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
sandrahoang686
changed the title
sandrahoang686
force-pushed
the
refactor/expose-page-header
branch
from
616a1cb
to
06b3a01
Compare
sandrahoang686
changed the title
sandrahoang686
changed the title
sandrahoang686
requested review from
dzole0311,
hanbyul-here,
AliceR and
aboydnw
There was a problem hiding this comment.
Thanks for working on it! I think navlink can be more worked on so they don't have to be a tags !
https://github.com/NASA-IMPACT/veda-ui/pull/1184/files#diff-6cccba12d155a579cba98d2e85e43fd88de10b0b6e83f44a261cceb1429e2695R77
| export default function Logo () { | ||
| export default function Logo ({ linkProperties }: { linkProperties: LinkProperties }) { | ||
| const LinkElement: ComponentType<any> = linkProperties.LinkElement as ComponentType<any>; | ||
|
|
||
| return ( | ||
| <ComponentOverride with='headerBrand'> |
There was a problem hiding this comment.
I am having trouble understanding how exporting Logo can work, when ComponentOverride component imports elements from the virtual moduleveda directly (https://github.com/NASA-IMPACT/veda-ui/blob/main/app/scripts/components/common/page-overrides.tsx#L3) Can you help me understand how this works?
There was a problem hiding this comment.
All of the instsances except OG dashboard overrides this component with each instance's branding : ex. https://github.com/US-GHG-Center/veda-config-ghg/blob/16fe5b7c08e67f78e1a2a27727a82ff28034f4bc/overrides/components/header-brand/component.tsx#L4 🤔 which makes me wonder if this component is worth exporting at all. how do you think?
There was a problem hiding this comment.
Probably not worth exporting, and we could anyway pass any ReactElement as a logo prop from Next.js: https://github.com/NASA-IMPACT/veda-ui/pull/1184/files#diff-86e372214b3b1dff36fcabf602d3ea911690d226a6e0bed48fee30b571864756R233
There was a problem hiding this comment.
very good point, thanks for making it 👍🏼 It might make sense in this case to separate the actual logo/svg from the styled container and have the logo/svg passed as a prop. I'll have to remove the veda virtual module dependency though so might have to recreate the same without the override 🤔, let me give it more thought!
There was a problem hiding this comment.
Created a separate LogoContainer component that takes in the SVG logo as a prop along with other attributres like title. When working on the new page header design implementation, we might not have to expose this container though as its meant to just fit in the page header itself, might just have instance pass in only the SVG itself but this will work best for now for our current state of code.
| <span>{title}</span> <span>{subTitle}</span> | ||
| </LinkElement> | ||
| <Tip content={`v${version}`}> | ||
| <PageTitleSecLink {...{as: linkProperties.LinkElement as ComponentType<any>, [linkProperties.pathAttributeKeyName]: '/development'}}>Beta</PageTitleSecLink> |
There was a problem hiding this comment.
I am not sure if this component can be used by other instances when only logo svg is tweak-able - (ex. ghg overwrote the whole logo)
There was a problem hiding this comment.
The plan is to use the logo container in the larger page-header component. So i mentioned in my above comment we probably dont have to expose this actually because it would just be integrated in page-header component directly but this would come in the next iteration of implementing the new page-header design. So its more like a set up for next phase 👍🏼
You can find VEDA Dashboard preview link to test these changes: NASA-IMPACT/veda-config#470 ## 🎉 Features - Cookie consent component: #1163, #1165, #1127, #1177 - Stories Hub export in #1162 - Expose As Is - PageHeader, LinkElement Prop & Logo in #1184 ## 🚀 Improvements - Add docs for registry dev in #1169 - Timeline date selection centering functionality in #1181 - Deprecate old explore page, Mapbox component #1176 - Update doc with new diagrams about general architecture in #1195 - Add playwright in #1139 - Pre-select AOIs that have the "selected" prop set to true in #1215 - ## 🐛 Fixes - Check dastaset analysis exclude attribute before running analysis in #1175 - Restrict dynamic colormaps to applicable layer types in #1183 - Fix external link badge display for tools hosted under the same domain in #1192 - Escape special characters in regex expression when searching datasets in #1204 ### New Contributors * @snmln made their first contribution in #1127 * @AliceR made their first contribution in #1204
Related Ticket: #1136
Description of Changes
Notes & Questions About Changes
5.8.0-alpha.0) => https://deploy-preview-6--veda-ui-next-test.netlify.app/Validation / Testing