75d6e60a95
* WIP: new autocomplete, search executed, dropdown positioned * WIP: most features working in Editor * handle textarea blur * fix bug with id not attached to textarea * updates to textAreaUtils tests * aria live, fix border style * replace comment text area * fix some height and style issues * update preact tests * clean up styles, rename files, use portal for popover * clean up styles, rename files, use portal for popover * scroll popover items into view if necessary * refactor cypress specs * actually remove the package * add some more specs * remove storybook stories for now * remove relative class causing issues * small fixes for cypress specs * make live region assertive to ensure change to combobox is known * some comments * add a storybook story * replace % font size, add explainer to story
29 lines
922 B
JavaScript
29 lines
922 B
JavaScript
import { h } from 'preact';
|
|
import PropTypes from 'prop-types';
|
|
|
|
/**
|
|
* Component used to display user details in the Autocomplete dropdown
|
|
*
|
|
* @param {object} props
|
|
* @param {string} props.name The user's name
|
|
* @param {string} props.profile_image_90 The src of the user's profile image
|
|
* @param {string} props.username The user's username
|
|
*/
|
|
export const UserListItemContent = ({ name, profile_image_90, username }) => (
|
|
<div className="flex">
|
|
<span className="crayons-avatar crayons-avatar--l mr-2 shrink-0">
|
|
<img src={profile_image_90} alt="" className="crayons-avatar__image " />
|
|
</span>
|
|
|
|
<div>
|
|
<p className="fs-m fw-medium">{name}</p>
|
|
<p className="color-base-60 fs-s">{`@${username}`}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
UserListItemContent.propTypes = {
|
|
name: PropTypes.string.isRequired,
|
|
username: PropTypes.string.isRequired,
|
|
profile_image_90: PropTypes.string.isRequired,
|
|
};
|