Commit b495a4a0 authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner

Transition `ThreadCard` to tailwind

Use shared `Card` component for styling
parent 931874fb
import { Card } from '@hypothesis/frontend-shared';
import classnames from 'classnames';
import debounce from 'lodash.debounce';
import { useCallback, useMemo } from 'preact/hooks';
......@@ -63,7 +64,11 @@ function ThreadCard({ frameSync, thread }) {
return (
/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
<div
<Card
classes={classnames('p-3 cursor-pointer', {
'is-focused': isFocused,
})}
data-testid="thread-card"
onClick={e => {
// Prevent click events intended for another action from
// triggering a page scroll.
......@@ -74,12 +79,9 @@ function ThreadCard({ frameSync, thread }) {
onMouseEnter={() => focusThreadAnnotation(threadTag)}
onMouseLeave={() => focusThreadAnnotation(null)}
key={thread.id}
className={classnames('ThreadCard p-3', {
'is-focused': isFocused,
})}
>
{threadContent}
</div>
</Card>
);
}
......
......@@ -11,6 +11,8 @@ describe('ThreadCard', () => {
let fakeStore;
let fakeThread;
const threadCardSelector = 'div[data-testid="thread-card"]';
function createComponent(props) {
return mount(
<ThreadCard frameSync={fakeFrameSync} thread={fakeThread} {...props} />
......@@ -54,14 +56,14 @@ describe('ThreadCard', () => {
const wrapper = createComponent();
assert(wrapper.find('.ThreadCard').hasClass('is-focused'));
assert.isTrue(wrapper.find(threadCardSelector).hasClass('is-focused'));
});
describe('mouse and click events', () => {
it('scrolls to the annotation when the `ThreadCard` is clicked', () => {
const wrapper = createComponent();
wrapper.find('.ThreadCard').simulate('click');
wrapper.find(threadCardSelector).simulate('click');
assert.calledWith(fakeFrameSync.scrollToAnnotation, 'myTag');
});
......@@ -69,7 +71,7 @@ describe('ThreadCard', () => {
it('focuses the annotation thread when mouse enters', () => {
const wrapper = createComponent();
wrapper.find('.ThreadCard').simulate('mouseenter');
wrapper.find(threadCardSelector).simulate('mouseenter');
assert.calledWith(fakeFrameSync.focusAnnotations, sinon.match(['myTag']));
});
......@@ -77,7 +79,7 @@ describe('ThreadCard', () => {
it('unfocuses the annotation thread when mouse exits', () => {
const wrapper = createComponent();
wrapper.find('.ThreadCard').simulate('mouseleave');
wrapper.find(threadCardSelector).simulate('mouseleave');
assert.calledWith(fakeFrameSync.focusAnnotations, sinon.match([]));
});
......@@ -89,10 +91,10 @@ describe('ThreadCard', () => {
const nodeChild = document.createElement('div');
nodeTarget.appendChild(nodeChild);
wrapper.find('.ThreadCard').props().onClick({
wrapper.find(threadCardSelector).props().onClick({
target: nodeTarget,
});
wrapper.find('.ThreadCard').props().onClick({
wrapper.find(threadCardSelector).props().onClick({
target: nodeChild,
});
assert.notCalled(fakeFrameSync.scrollToAnnotation);
......
@use '../../variables' as var;
@use '../../mixins/layout';
@use '../../mixins/molecules';
@use '../../mixins/utils';
.ThreadCard {
@include molecules.card;
cursor: pointer;
}
......@@ -24,7 +24,6 @@
@use './SelectionTabs';
@use './SearchInput';
@use './StyledText';
@use './ThreadCard';
@use './ToastMessages';
@use './VersionInfo';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment