80096f63a7
* Add the preview card to logged out feed initial content * initialise the initial dropdowns added on the logged out feed * minor tweak to selector * flip the follow button and the summary * add minimal preview card to build article HTML * WIP: data fetched an inserted into card on logged out feed * WIP: cards added to logged in feed * create separate profile preview card component * small style tweak, import pack on each page that shows feed cards * rename * tweak some styling issues * make sure follow buttons init in cards * populate all matching metadata placeholders after fetch * don't render full preview card upfront on logged out feed * refactors from PR comments * fix issue in person search results * remove check for article author link that will be superseded by cypress test for preview card * Revert "remove check for article author link that will be superseded by cypress test for preview card" This reverts commit 9b42804ffd0f051891c87293d0b791ed2bb0367f. * Revert "fix issue in person search results" This reverts commit 04941e3520c0895212141193b60f2933faed5ca1. * only show the preview cards on story cards for Posts (not users etc in search results) * correct display on collections view * remove link check that will be replaced by cypress test * tweaks to small issues, add a test for the logged out feed * add tests for logged in home feed, logged out tag index * add search test and tag index logged in test * fixes to preview profile spec * tweak to followauthor spec * add cypress test for preview on series page * use a unique test user for series test * correct the jsdoc comments * tweaks following PR review * allow feed preview cards to reposition * move to separate file from pack
61 lines
1.7 KiB
JavaScript
61 lines
1.7 KiB
JavaScript
import { h } from 'preact';
|
|
|
|
export const MinimalProfilePreviewCard = ({
|
|
triggerId,
|
|
contentId,
|
|
username,
|
|
name,
|
|
profileImage,
|
|
userId,
|
|
}) => (
|
|
<div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block">
|
|
<button
|
|
id={triggerId}
|
|
aria-controls={contentId}
|
|
class="profile-preview-card__trigger fs-s p-1 crayons-btn crayons-btn--ghost -ml-1"
|
|
aria-label={`${name} profile details`}
|
|
>
|
|
{name}
|
|
</button>
|
|
|
|
<div
|
|
id={contentId}
|
|
class="profile-preview-card__content crayons-dropdown"
|
|
style="border-top: var(--su-7) solid var(--card-color);"
|
|
data-repositioning-dropdown="true"
|
|
data-testid="profile-preview-card"
|
|
>
|
|
<div class="gap-4 grid">
|
|
<div class="-mt-4">
|
|
<a href={`/${username}`} class="flex">
|
|
<span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0">
|
|
<img
|
|
src={profileImage}
|
|
class="crayons-avatar__image"
|
|
alt=""
|
|
loading="lazy"
|
|
/>
|
|
</span>
|
|
<span class="crayons-link crayons-subtitle-2 mt-5">{name}</span>
|
|
</a>
|
|
</div>
|
|
<div class="print-hidden">
|
|
<button
|
|
class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100"
|
|
data-info={JSON.stringify({
|
|
id: userId,
|
|
className: 'User',
|
|
style: 'full',
|
|
})}
|
|
>
|
|
Follow
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="author-preview-metadata-container"
|
|
data-author-id={userId}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|