Commit df5f4b95 authored by Lyza Danger Gardner's avatar Lyza Danger Gardner

Add reply and collapsed classnames to `AnnotationOmega`

Mirror the current implementation in `Annotation` and `AnnotationThread`
for applying stateful CSS classes to `AnnotationOmega` elements. This
approach should be reviewed after migration is complete.

Fixes #1837
parent 9d84846b
import classnames from 'classnames';
import { createElement } from 'preact'; import { createElement } from 'preact';
import { useEffect, useState } from 'preact/hooks'; import { useEffect, useState } from 'preact/hooks';
import propTypes from 'prop-types'; import propTypes from 'prop-types';
...@@ -115,7 +116,13 @@ function AnnotationOmega({ ...@@ -115,7 +116,13 @@ function AnnotationOmega({
return ( return (
/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */ /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */
<div className="annotation-omega" onKeyDown={onKeyDown}> <div
className={classnames('annotation-omega', {
'annotation--reply': isReply(annotation),
'is-collapsed': threadIsCollapsed,
})}
onKeyDown={onKeyDown}
>
<AnnotationHeader <AnnotationHeader
annotation={annotation} annotation={annotation}
isEditing={isEditing} isEditing={isEditing}
......
...@@ -95,6 +95,25 @@ describe('AnnotationOmega', () => { ...@@ -95,6 +95,25 @@ describe('AnnotationOmega', () => {
it('should test `isSaving`'); it('should test `isSaving`');
describe('annotation classnames', () => {
it('should assign a reply class if the annotation is a reply', () => {
fakeMetadata.isReply.returns(true);
const wrapper = createComponent({ threadIsCollapsed: false });
const annot = wrapper.find('.annotation-omega');
assert.isTrue(annot.hasClass('annotation--reply'));
assert.isFalse(annot.hasClass('is-collapsed'));
});
it('should assign a collapsed class if the annotation thread is collapsed', () => {
const wrapper = createComponent({ threadIsCollapsed: true });
const annot = wrapper.find('.annotation-omega');
assert.isTrue(annot.hasClass('is-collapsed'));
});
});
describe('annotation quote', () => { describe('annotation quote', () => {
it('renders quote if annotation has a quote', () => { it('renders quote if annotation has a quote', () => {
fakeMetadata.quote.returns('quote'); fakeMetadata.quote.returns('quote');
......
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