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

Update `AnnotationShareInfo` to use `Icon`, simpler styling

parent 6fce0ccd
import { SvgIcon } from '@hypothesis/frontend-shared'; import { Icon, Link } from '@hypothesis/frontend-shared';
import { useStoreProxy } from '../../store/use-store'; import { useStoreProxy } from '../../store/use-store';
import { isPrivate } from '../../helpers/permissions'; import { isPrivate } from '../../helpers/permissions';
/** /**
* @typedef {import("../../../types/api").Annotation} Annotation * @typedef {import("../../../types/api").Annotation} Annotation
* @typedef {import('../../../types/api').Group} Group
*/ */
/** /**
...@@ -30,25 +29,24 @@ function AnnotationShareInfo({ annotation }) { ...@@ -30,25 +29,24 @@ function AnnotationShareInfo({ annotation }) {
const annotationIsPrivate = isPrivate(annotation.permissions); const annotationIsPrivate = isPrivate(annotation.permissions);
return ( return (
<div className="AnnotationShareInfo hyp-u-layout-row--align-baseline"> <div className="hyp-u-layout-row--align-baseline">
{group && linkToGroup && ( {group && linkToGroup && (
<a <Link
className="hyp-u-layout-row--align-baseline u-color-text--muted" classes="hyp-u-layout-row--align-baseline hyp-u-horizontal-spacing--2 p-link--muted p-link--hover-muted"
href={group.links.html} href={group.links.html}
target="_blank" target="_blank"
rel="noopener noreferrer"
> >
{group.type === 'open' ? ( {group.type === 'open' ? (
<SvgIcon className="AnnotationShareInfo__icon" name="public" /> <Icon classes="u-icon--xsmall" name="public" />
) : ( ) : (
<SvgIcon className="AnnotationShareInfo__icon" name="groups" /> <Icon classes="u-icon--xsmall" name="groups" />
)} )}
<span className="AnnotationShareInfo__group-info">{group.name}</span> <span>{group.name}</span>
</a> </Link>
)} )}
{annotationIsPrivate && !linkToGroup && ( {annotationIsPrivate && !linkToGroup && (
<span className="hyp-u-layout-row--align-baseline u-color-text--muted"> <span className="hyp-u-layout-row--align-baseline u-color-text--muted">
<span className="AnnotationShareInfo__private-info">Only me</span> <span data-testid="private-info">Only me</span>
</span> </span>
)} )}
</div> </div>
......
...@@ -58,18 +58,18 @@ describe('AnnotationShareInfo', () => { ...@@ -58,18 +58,18 @@ describe('AnnotationShareInfo', () => {
it('should display a group icon for private and restricted groups', () => { it('should display a group icon for private and restricted groups', () => {
const wrapper = createAnnotationShareInfo(); const wrapper = createAnnotationShareInfo();
const groupIcon = wrapper.find('SvgIcon'); const groupIcon = wrapper.find('Icon[name="groups"]');
assert.equal(groupIcon.prop('name'), 'groups'); assert.isTrue(groupIcon.exists());
}); });
it('should display a public/world icon for open groups', () => { it('should display a public/world icon for open groups', () => {
fakeGroup.type = 'open'; fakeGroup.type = 'open';
const wrapper = createAnnotationShareInfo(); const wrapper = createAnnotationShareInfo();
const groupIcon = wrapper.find('SvgIcon'); const groupIcon = wrapper.find('Icon[name="public"]');
assert.equal(groupIcon.prop('name'), 'public'); assert.isTrue(groupIcon.exists());
}); });
it('should not show a link to third-party groups', () => { it('should not show a link to third-party groups', () => {
...@@ -110,7 +110,7 @@ describe('AnnotationShareInfo', () => { ...@@ -110,7 +110,7 @@ describe('AnnotationShareInfo', () => {
fakeGetGroup.returns({ name: 'Some Name', links: {} }); fakeGetGroup.returns({ name: 'Some Name', links: {} });
const wrapper = createAnnotationShareInfo(); const wrapper = createAnnotationShareInfo();
const privacyText = wrapper.find('.AnnotationShareInfo__private-info'); const privacyText = wrapper.find('[data-testid="private-info"]');
assert.isOk(privacyText.exists()); assert.isOk(privacyText.exists());
assert.equal(privacyText.text(), 'Only me'); assert.equal(privacyText.text(), 'Only me');
......
@use '../../variables' as var;
@use '../../mixins/layout';
@use '../../mixins/utils';
.AnnotationShareInfo {
&__icon {
@include utils.icon--xsmall;
// This margin is currently needed because the icon is within an `a` element
margin-right: 5px;
}
}
...@@ -23,7 +23,6 @@ ...@@ -23,7 +23,6 @@
@use './components/AnnotationPublishControl'; @use './components/AnnotationPublishControl';
@use './components/AnnotationQuote'; @use './components/AnnotationQuote';
@use './components/AnnotationShareControl'; @use './components/AnnotationShareControl';
@use './components/AnnotationShareInfo';
@use './components/AutocompleteList'; @use './components/AutocompleteList';
@use './components/Excerpt'; @use './components/Excerpt';
@use './components/FilterSelect'; @use './components/FilterSelect';
......
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