Commit 5ce4ac3b authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner

Update shared components in `AnnotationBody`

Visual change: font in button to expand and collapse excerpt is now
semi-bold, which matches all of our other buttons.
parent f5ed2b90
import { Icon, LabeledButton } from '@hypothesis/frontend-shared';
import {
Button,
CollapseIcon,
ExpandIcon,
} from '@hypothesis/frontend-shared/lib/next';
import classnames from 'classnames';
import { useMemo, useState } from 'preact/hooks';
......@@ -29,25 +33,21 @@ import TagListItem from '../TagListItem';
function ToggleExcerptButton({ classes, setCollapsed, collapsed }) {
const toggleText = collapsed ? 'More' : 'Less';
return (
<LabeledButton
<Button
classes={classnames('text-grey-7 font-normal', classes)}
expanded={!collapsed}
onClick={() => setCollapsed(!collapsed)}
title={`Toggle visibility of full annotation text: Show ${toggleText}`}
>
<div className="flex items-center gap-x-2">
<Icon
classes={classnames(
// TODO: Refactor shared LabeledButton styles such that rules
// have lower specificity and we don't need an !important rule here
'!text-tiny'
{collapsed ? (
<ExpandIcon className="w-3 h-3" />
) : (
<CollapseIcon className="w-3 h-3" />
)}
name={collapsed ? 'expand' : 'collapse'}
title={collapsed ? 'expand' : 'collapse'}
/>
<div>{toggleText}</div>
</div>
</LabeledButton>
</Button>
);
}
......
......@@ -125,7 +125,7 @@ describe('AnnotationBody', () => {
});
wrapper.update();
const button = wrapper.find('LabeledButton');
const button = wrapper.find('Button');
assert.isOk(button.exists());
assert.equal(
button.props().title,
......@@ -146,11 +146,11 @@ describe('AnnotationBody', () => {
wrapper.update();
act(() => {
wrapper.find('LabeledButton').props().onClick();
wrapper.find('Button').props().onClick();
});
wrapper.update();
const buttonProps = wrapper.find('LabeledButton').props();
const buttonProps = wrapper.find('Button').props();
assert.equal(
buttonProps.title,
......
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