Skip to content

[feat] pfe-card | sticky card #1614

@castastrophe

Description

@castastrophe

Include a unique ID specific to sticky card component so that Target can set it to display none or replace the contents of the sticky card. (should this be in webrh or PFE?)

Details in this doc (internal) under sticky card.

  • Custom events should fire when one of these components appears on the page, after load
  • Replace content before component upgrades -- though we'd have to make sure that element exists
    • We have use promises to create handshakes between Target & PFE
  • Lifecycle hook - only if there's content in the component and you need access to the shadow dom, and it didn't exist in the light dom but this shouldn't be an issue
  • Wrap DOMContentLoaded event around target test, to ensure whether or not a thing exists
  • If you change the web component after upgrade, it will re-render
  • Global state manager 

Code Ideas

Calling a public method on a PFE component that would dynamically create an alert.
​​
image

Details on webrh vs PFE implementation (internal)

PFE specific requests:

  • Sticky card will appear in the regular flow of the page until the specified breakpoint is reached. When the given breakpoint is reached the card will update to stick to the right of the page (will have help text suggesting to place it at the bottom).
  • 1 breakpoint to shrink the card size as it begins to cover content when the window shrinks before going to inline on mobile
  • X-button to hide card
  • Checkbox to show card on load. 
  • Otherwise fade card in on specific scroll position
    • Field to set fadein based on scroll position (x amount of pixels)
    • If there’s a hero add height of hero to this amount
  • [CR] Q for self: Do we need an intersection observer component?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions