Demo #881
Closed
Demo #881
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Updates EventSection to use a slot component for the section heading text. Refactors HeadingText to include an align prop and organize props into data/styles Will update the rest of EventSection (+tests) in separate PR but heading will be a shared component Used a SlotsCategory because it seems like `resolvePermissions` doesn't support checking if the component is in a slot or not. Will start a thread with the Puck team because that would be easier. https://github.com/user-attachments/assets/b9758171-3f8e-4ba8-8f31-1ee1d18ceb26 --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Adds test for existing component before slots --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
I messed up in the other pr, should've used pt instead of msg for the category names Added the streamDocument to Puck metadata to make it available in resolveFields/resolveData, will be used in future slot PRs
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Adds the HeadingTextSlot and AddressSlot to CoreInfoSection. Site with [changes](https://dev.yext.com/s/1000125503/yextsites/65802/editor#pageSetId=hello&locale=en&themeId=alexis-w-o-artifact&entityId=8665524) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
[Test site](https://dev.yext.com/s/1000125503/yextsites/65802/editor#pageSetId=test-hours&locale=en&themeId=alexis-w-o-artifact&entityId=8665524) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Last part of slot-ifying the CoreInfoSection --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Turns the components of Promo Section into slots and gets rid of the YextStructField functionality for promo ~The images render a little differently, will look into whether we can do anything about that or that's the slot wrappers getting in the way~ fixed --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Colton Demetriou <88292188+colton-demetriou@users.noreply.github.com> Co-authored-by: coltondemetriou <coltondemetriou@gmail.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: briantstephan <70166284+briantstephan@users.noreply.github.com>
Removes `type.hero_section` and entity override logic for structs, adds slots for hero section including support for all 4 variants. --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Swaps to slots in Product section. Uses two useEffects to sync state: One moves puck data into react context to be consumed by the slot children One moves updated react context values into puck data so that it is saved to the db Uses three levels of resolveData 1. top level - forwards the section heading level to the children to properly set the semantic level 2. mid level - handles resolving the entity field vs. static values and adding/removing/updating Product cards 3. bottom level - handles forwarding parentData (entity values) to the content slots of the Product card Moves the publish data migration step so that it runs after the document has been loaded (needed so that we can resolve entity values in migrations to create the correct number of cards) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Colton Demetriou <88292188+colton-demetriou@users.noreply.github.com> Co-authored-by: coltondemetriou <coltondemetriou@gmail.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: briantstephan <70166284+briantstephan@users.noreply.github.com> Co-authored-by: Alexis Sanehisa <106991746+asanehisa@users.noreply.github.com> Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Brian Stephan <bstephan@yext.com>
- fixes image `sizes` and cta `eventName` for product section (will do others in separate pr) - refactors some shared list slot code --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
- handles img `sizes` for Promo - runs `resolveAllData` when the streamDocument updates -- necessary for entity switching in the editor - adds CTA event names for Hero/Promo - adds ids to the slot children of the default cards-- solves a problem where sometimes the puck would not automatically add an id, leading to strange rendering --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
<img width="1656" height="774" alt="Screenshot 2025-10-15 at 3 50 42 PM" src="https://github.com/user-attachments/assets/37d944dd-8f78-43be-9fd1-f791513cbef7" /> Tested all functionality of editing fields, theme, drag and drop, etc. --------- Co-authored-by: coltondemetriou <coltondemetriou@gmail.com> Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
We added the `ctaType` field with three options: `textAndLink`, `getDirections`, and `presetImage`. This was originally added to the `constantValue` object but later also tied into entity field selection. In the current artifact, these options are only available for Hero/Promo and the content blocks, but going forward every slot component will use CTAWrapper. There were a few bugs - the entity field selector doesn't update when swapped to `getDirections` - the image for `presetImage` is not selectable in entity mode - CTA variant (primary/secondary/link) was always prop even though it does not apply to `presetImage` mode A lot of the complexity comes from that `presetImage` is really a styling variant of `textAndLink`, whereas `getDirections` is a different data type. This change: - moves the option for `textAndLink` vs. `presetImage` to the `styles` section of CTAWrapper - `variant` and the image for `presetImage` are styles fields that are conditionally hid/shown - visually moves the `link` vs `getDirections` option in the `data` section to the top of the header - moves the `link` vs `getDirections` option in data payload out of `constantValue` since it applies to both entity values and constant values - ensures the entity field selector always updates when `link` vs `getDirections` is toggled - hides CTAs that don't have a label, coordinate, or preset image --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
<img width="1626" height="814" alt="Screenshot 2025-10-17 at 5 34 11 PM" src="https://github.com/user-attachments/assets/ef4a0064-070e-494b-a276-e4ce8a253bba" /> --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: coltondemetriou <coltondemetriou@gmail.com> Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
There's not a good way to do the card pattern we have for product/event/insights with using the content endpoint as the data source (resolveData supports async calls but doesn't run every time the page is loaded and you can't dispatch puck data from the react component on the live page) This separates the section into the section heading, a single component holding all of the cards, and the overall page section. --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
<img width="1613" height="851" alt="Screenshot 2025-10-22 at 6 17 03 PM" src="https://github.com/user-attachments/assets/dd4b7bfd-cc87-4f64-ab16-eb36b213ed14" /> --------- Co-authored-by: coltondemetriou <coltondemetriou@gmail.com> Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Will rebase off colton's 34 when its submitted. It looks like we added a new version 1 test but really I just fixed the name of the test as we had two tests with the same name on accident. --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
<img width="1554" height="1050" alt="Screenshot 2025-10-23 at 12 02 28 PM" src="https://github.com/user-attachments/assets/cc64ec01-6021-4886-a931-4e857ee6fd58" /> --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: coltondemetriou <coltondemetriou@gmail.com> Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
We previously were rendering the promo/hero image twice, once on either side of the content, and hiding one with css. After switching to slots, this caused a duplicate action bar to appear because Puck saw two Image components with the same id. This uses querySelector to find the duplicate action bar and hide it. ~Every once in a while, the bar flashes for a split section, so it's not perfect but probably is better~ https://github.com/user-attachments/assets/7848f93c-9c7f-4284-be8e-5b0d0e48b203 --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Some of the spacing in the directory cards changed but I believe it is a positive change as it removes an odd gap if a location doesn't have a phone number. Additionally I changed the vite.config so dts() isn't run during tests, it was causing my directory tests to occasionally timeout due to hanging processes. --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Fixes a mistake in my original card PR, the migrations should use the unique parent id when creating the cards in case that an existing site has multiple of a section on the page. ~Will rebase after #832 merges~ Also fixes the default description in the Promo Section not responding to body text variants --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Decreases the size of the prop breadcrumbs/header, and truncates the breadcrumbs if the text still extends beyond the horizontal space. https://github.com/user-attachments/assets/7dd01034-6755-4c51-a4bc-3120cea39bfb --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Previous test cases had width: undefined which was difficult to resolve nicely which causes some differences in logo sizing on mobile vs desktop. But TIAA's live site will see no changes. The default links for primary and secondary headers are now "Header Link" rather than "Main Header Link" and "Secondary Header Link". This only affects the default data screenshots. Per Elizabeth secondary header now defaults to true. --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
<img width="1300" height="821" alt="Screenshot 2025-10-27 at 7 49 44 PM" src="https://github.com/user-attachments/assets/bda4dc9e-b133-4d93-9c44-3f856459e213" /> --------- Co-authored-by: coltondemetriou <coltondemetriou@gmail.com> Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Didn't save on previous commit Co-authored-by: coltondemetriou <coltondemetriou@gmail.com>
- re-numbers migrations to account for 2 new migrations on main - merges the CTA changes made for ref_listings with the CTA changes made for slots - rebuilds the grid version 28 test --------- Co-authored-by: Colton Demetriou <88292188+colton-demetriou@users.noreply.github.com> Co-authored-by: coltondemetriou <coltondemetriou@gmail.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: briantstephan <70166284+briantstephan@users.noreply.github.com> Co-authored-by: Alexis Sanehisa <106991746+asanehisa@users.noreply.github.com> Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Brian Stephan <bstephan@yext.com> Co-authored-by: Alexis Sanehisa <asanehisa@yext.com> Co-authored-by: anguyen-yext2 <143001514+anguyen-yext2@users.noreply.github.com> Co-authored-by: Kyle Gerner <49618240+k-gerner@users.noreply.github.com> Co-authored-by: Matt Kilpatrick <mkilpatrick@yext.com>
Tested and confirmed these layout datas look correct in the editor and the live page.
Now when migrations occur, the ids are all set such that the editor and live page look correct (before only live page looked correct while editor was broken). Before: <img width="1840" height="1191" alt="Screenshot 2025-11-03 at 10 11 08 AM" src="https://github.com/user-attachments/assets/c58ae670-e00f-4f79-a02d-072e8a12604d" /> After: <img width="1840" height="1191" alt="Screenshot 2025-11-03 at 1 53 09 PM" src="https://github.com/user-attachments/assets/2db203cd-45b4-430f-a0fa-79f4e2cd6a11" /> --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
fixes: - in-editor min-heights - some were missing widths - the images were non-null but missing urls - one was missing a puck ref - body text variants - some were plain strings when it should've been rtf - if `<BodyText>` received a plain string, we weren't wrapping it in `<p>` --> this is responsible for most of the screenshot changes - organizes default card data - in-editor card sizing - the cards need to be puck's `inline` so that the stretching works --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Fixed PromoSection migration so after migration u can still toggle between video + image. Also adjusted testimonialSectionSlot's constantValue for cardsWrapper. [Before](https://jam.dev/c/4e29543c-f1c6-45ae-9878-4eb1515041bf) [After](https://jam.dev/c/58a6194b-5cda-491e-98ea-3479802a0e72) --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Fixes: - timestamp in testimonials - missing hero and core info tests - embedded string field styling - hero mobile alignment --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
accidently pushed to branch This reverts commit fcadb5d.
https://github.com/user-attachments/assets/254f3b76-d5aa-4431-a072-7f1dc77e5f22 Created follow up to investigate making the icon clickable in the slots: https://yexttest.atlassian.net/browse/SUMO-7966 --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: coltondemetriou <coltondemetriou@gmail.com>
- updates defaultLayoutData - merges main again (most significant change: url template functions) - adds an additional migration test case --------- Co-authored-by: Colton Demetriou <88292188+colton-demetriou@users.noreply.github.com> Co-authored-by: coltondemetriou <coltondemetriou@gmail.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: briantstephan <70166284+briantstephan@users.noreply.github.com> Co-authored-by: Alexis Sanehisa <106991746+asanehisa@users.noreply.github.com> Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Brian Stephan <bstephan@yext.com> Co-authored-by: Alexis Sanehisa <asanehisa@yext.com> Co-authored-by: anguyen-yext2 <143001514+anguyen-yext2@users.noreply.github.com> Co-authored-by: Kyle Gerner <49618240+k-gerner@users.noreply.github.com> Co-authored-by: Matt Kilpatrick <mkilpatrick@yext.com> Co-authored-by: mkouzel-yext <mkouzel@yext.com> Co-authored-by: Kyle Gerner <kgerner@yext.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
- add slot components to directory config - merge main into slots again --------- Co-authored-by: Colton Demetriou <88292188+colton-demetriou@users.noreply.github.com> Co-authored-by: coltondemetriou <coltondemetriou@gmail.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: briantstephan <70166284+briantstephan@users.noreply.github.com> Co-authored-by: Alexis Sanehisa <106991746+asanehisa@users.noreply.github.com> Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Brian Stephan <bstephan@yext.com> Co-authored-by: Alexis Sanehisa <asanehisa@yext.com> Co-authored-by: anguyen-yext2 <143001514+anguyen-yext2@users.noreply.github.com> Co-authored-by: Kyle Gerner <49618240+k-gerner@users.noreply.github.com> Co-authored-by: Matt Kilpatrick <mkilpatrick@yext.com> Co-authored-by: mkouzel-yext <mkouzel@yext.com> Co-authored-by: Kyle Gerner <kgerner@yext.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Fondryext <160865254+Fondryext@users.noreply.github.com>
This reverts commit e1a1957.
<img width="1186" height="434" alt="Screenshot 2025-11-06 at 2 59 06 PM" src="https://github.com/user-attachments/assets/d65db46a-406a-4b4c-a2f8-0f2921da4b3c" /> --------- Co-authored-by: coltondemetriou <coltondemetriou@gmail.com>
Contributor
|
Caution Review failedThe pull request is closed. WalkthroughThis pull request represents a major release (v1.0.0-beta.0) introducing a significant architectural shift in the visual editor from a data-driven component model to a slot-based composition pattern. Changes span localization updates across 24+ languages, new slot-based header/footer/content components, comprehensive data migration logic (migrations 0024-0039), restructured CTA and image handling, removal of the legacy Directory component with relocation to a new nested structure, and updates to the publish workflow. The package version is bumped to 1.0.0-beta.0, and numerous component APIs are refactored to support nested data and styles objects, parent data propagation, and conditional field visibility. Sequence Diagram(s)sequenceDiagram
actor User
participant Editor as Visual Editor
participant Migration as Migration Pipeline
participant Components as New Slot Components
participant Render as Render Engine
User->>Editor: Load old page config (v0.x)
Editor->>Migration: Trigger migration (e.g., 0025_event_section_slots)
rect rgb(200, 220, 255)
Note over Migration: Old data-driven structure
Migration->>Migration: Extract event data, resolve locales
Migration->>Migration: Build nested slots (DateSlot, TitleSlot, DescriptionSlot)
Migration->>Migration: Generate EventCard for each event
end
Migration->>Components: Return transformed props with slots
rect rgb(220, 255, 220)
Note over Components: New slot-based structure
Components->>Components: EventCardsWrapper aggregates EventCards
Components->>Components: Each EventCard renders nested slots
end
Components->>Render: Mount with resolved data
Render->>Render: Resolve slot data via parentData or constant values
Render->>User: Display rendered section
opt Parent Data Flow
Components->>Components: If constantValueEnabled=false, use parentData
Components->>Components: Else use constantValue from data
end
Possibly related PRs
Suggested labels
Suggested reviewers
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro ⛔ Files ignored due to path filters (129)
📒 Files selected for processing (102)
Comment |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.