Commit 0adb6133 authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner

Update annotation leaf components for shared components, patterns

Part of https://github.com/hypothesis/frontend-shared/issues/232
parent 65bf7755
/** @typedef {import("../../../types/api").Annotation} Annotation */ import { Link } from '@hypothesis/frontend-shared';
/** /**
* @typedef AnnotationDocumentInfoProps * @typedef AnnotationDocumentInfoProps
...@@ -19,9 +19,9 @@ export default function AnnotationDocumentInfo({ domain, link, title }) { ...@@ -19,9 +19,9 @@ export default function AnnotationDocumentInfo({ domain, link, title }) {
<div className="u-color-text--muted"> <div className="u-color-text--muted">
on &quot; on &quot;
{link ? ( {link ? (
<a href={link} target="_blank" rel="noopener noreferrer"> <Link href={link} target="_blank">
{title} {title}
</a> </Link>
) : ( ) : (
<span>{title}</span> <span>{title}</span>
)} )}
......
import { SvgIcon } from '@hypothesis/frontend-shared'; import { Icon, Link } from '@hypothesis/frontend-shared';
/** /**
* Render information about CC licensing * Render information about CC licensing
*/ */
export default function AnnotationLicense() { export default function AnnotationLicense() {
return ( return (
<div className="AnnotationLicense"> <div className="hyp-u-padding--top hyp-u-border--top u-font--small u-line-height">
<a <Link
className="hyp-u-layout-row u-color-text--muted" classes="hyp-u-layout-row--align-center p-link--muted"
href="http://creativecommons.org/publicdomain/zero/1.0/" href="http://creativecommons.org/publicdomain/zero/1.0/"
title="View more information about the Creative Commons Public Domain dedication"
target="_blank" target="_blank"
rel="noopener noreferrer" title="View more information about the Creative Commons Public Domain dedication"
> >
<div className="AnnotationLicense__icons"> <Icon name="cc-std" classes="u-icon--xsmall" />
<SvgIcon name="cc-std" inline={true} className="u-icon--xsmall" /> <Icon name="cc-zero" classes="hyp-u-margin--left--1 u-icon--xsmall" />
<SvgIcon name="cc-zero" inline={true} className="u-icon--xsmall" /> <div className="hyp-u-margin--left--2">
</div>
Annotations can be freely reused by anyone for any purpose. Annotations can be freely reused by anyone for any purpose.
</a> </div>
</Link>
</div> </div>
); );
} }
import { Link } from '@hypothesis/frontend-shared';
import { useEffect, useMemo, useState } from 'preact/hooks'; import { useEffect, useMemo, useState } from 'preact/hooks';
import { import {
...@@ -6,10 +7,6 @@ import { ...@@ -6,10 +7,6 @@ import {
formatDate, formatDate,
} from '../../util/time'; } from '../../util/time';
/**
* @typedef {import("../../../types/api").Annotation} Annotation
*/
/** /**
* @typedef AnnotationTimestampsProps * @typedef AnnotationTimestampsProps
* @prop {string} annotationCreated * @prop {string} annotationCreated
...@@ -81,28 +78,29 @@ export default function AnnotationTimestamps({ ...@@ -81,28 +78,29 @@ export default function AnnotationTimestamps({
: 'edited'; : 'edited';
return ( return (
<div className="AnnotationTimestamps"> <div>
{withEditedTimestamp && ( {withEditedTimestamp && (
<span <span
className="AnnotationTimestamps__timestamp AnnotationTimestamps__edited" className="u-color-text--muted u-font--small u-font--italic"
data-testid="timestamp-edited"
title={updated.absolute} title={updated.absolute}
> >
({editedString}){' '} ({editedString}){' '}
</span> </span>
)} )}
{annotationUrl ? ( {annotationUrl ? (
<a <Link
className="AnnotationTimestamps__timestamp AnnotationTimestamps__timestamp--linked" classes="p-link--muted p-link--hover-muted"
target="_blank" target="_blank"
rel="noopener noreferrer"
title={created.absolute} title={created.absolute}
href={annotationUrl} href={annotationUrl}
> >
{created.relative} {created.relative}
</a> </Link>
) : ( ) : (
<span <span
className="AnnotationTimestamps__timestamp AnnotationTimestamps__created" className="u-color-text--muted"
data-testid="timestamp-created"
title={created.absolute} title={created.absolute}
> >
{created.relative} {created.relative}
......
/** import { Link } from '@hypothesis/frontend-shared';
* @typedef {import("../../../types/api").Annotation} Annotation
*/
/** /**
* @typedef AnnotationUserProps * @typedef AnnotationUserProps
...@@ -10,31 +8,22 @@ ...@@ -10,31 +8,22 @@
/** /**
* Display information about an annotation's user. Link to the user's * Display information about an annotation's user. Link to the user's
* activity if it is a first-party user or `settings.usernameUrl` is present. * activity if `authorLink` is present.
* *
* @param {AnnotationUserProps} props * @param {AnnotationUserProps} props
*/ */
function AnnotationUser({ authorLink, displayName }) { function AnnotationUser({ authorLink, displayName }) {
const user = <h3 className="u-color-text u-font--bold">{displayName}</h3>;
if (authorLink) { if (authorLink) {
return ( return (
<div className="AnnotationUser"> <Link href={authorLink} target="_blank">
<a {user}
className="AnnotationUser__link" </Link>
href={authorLink}
target="_blank"
rel="noopener noreferrer"
>
<h3 className="AnnotationUser__user-name">{displayName}</h3>
</a>
</div>
); );
} }
return ( return <div>{user}</div>;
<div className="AnnotationUser">
<h3 className="AnnotationUser__user-name">{displayName}</h3>
</div>
);
} }
export default AnnotationUser; export default AnnotationUser;
...@@ -51,8 +51,8 @@ describe('AnnotationTimestamps', () => { ...@@ -51,8 +51,8 @@ describe('AnnotationTimestamps', () => {
it('renders an unlinked created timestamp if annotation does not have a link', () => { it('renders an unlinked created timestamp if annotation does not have a link', () => {
const wrapper = createComponent({ annotationUrl: '' }); const wrapper = createComponent({ annotationUrl: '' });
const link = wrapper.find('a'); const link = wrapper.find('Link');
const span = wrapper.find('span.AnnotationTimestamps__created'); const span = wrapper.find('span[data-testid="timestamp-created"]');
assert.isFalse(link.exists()); assert.isFalse(link.exists());
assert.isTrue(span.exists()); assert.isTrue(span.exists());
assert.equal(span.text(), 'fuzzy string'); assert.equal(span.text(), 'fuzzy string');
...@@ -63,7 +63,7 @@ describe('AnnotationTimestamps', () => { ...@@ -63,7 +63,7 @@ describe('AnnotationTimestamps', () => {
const wrapper = createComponent({ withEditedTimestamp: true }); const wrapper = createComponent({ withEditedTimestamp: true });
const editedTimestamp = wrapper.find('.AnnotationTimestamps__edited'); const editedTimestamp = wrapper.find('[data-testid="timestamp-edited"]');
assert.isTrue(editedTimestamp.exists()); assert.isTrue(editedTimestamp.exists());
assert.include(editedTimestamp.text(), '(edited another fuzzy string)'); assert.include(editedTimestamp.text(), '(edited another fuzzy string)');
}); });
...@@ -73,7 +73,7 @@ describe('AnnotationTimestamps', () => { ...@@ -73,7 +73,7 @@ describe('AnnotationTimestamps', () => {
const wrapper = createComponent({ withEditedTimestamp: true }); const wrapper = createComponent({ withEditedTimestamp: true });
const editedTimestamp = wrapper.find('.AnnotationTimestamps__edited'); const editedTimestamp = wrapper.find('[data-testid="timestamp-edited"]');
assert.isTrue(editedTimestamp.exists()); assert.isTrue(editedTimestamp.exists());
assert.include(editedTimestamp.text(), '(edited)'); assert.include(editedTimestamp.text(), '(edited)');
}); });
......
@use '../../variables' as var;
@use '../../mixins/layout';
@use '../../mixins/utils';
.AnnotationLicense {
@include utils.font--small;
@include utils.border--top;
// Space between border and text content
padding-top: var.$layout-space--xsmall;
// Container with two icons (representing CC licenses)
// with a very small amount of spacing between them
&__icons {
@include layout.row;
@include layout.horizontal-rhythm(1px);
// Add space before text
margin-right: var.$layout-space--xxsmall;
}
}
@use '../../variables' as var;
@use '../../mixins/utils';
.AnnotationTimestamps {
&__timestamp {
color: var.$color-text--light;
&--linked {
&:hover {
color: var.$color-text--light;
text-decoration: underline;
}
}
}
&__edited {
@include utils.font--small;
color: var.$color-text--light;
font-style: italic;
}
}
@use '../../variables' as var;
.AnnotationUser {
&__user-name {
color: var.$color-text;
font-weight: bold;
}
}
...@@ -13,18 +13,18 @@ ...@@ -13,18 +13,18 @@
// Custom button styling for the application // Custom button styling for the application
@use './buttons'; @use './buttons';
// Local patterns
@use '../patterns';
// Components // Components
// ---------- // ----------
@use './components/Annotation'; @use './components/Annotation';
@use './components/AnnotationBody'; @use './components/AnnotationBody';
@use './components/AnnotationHeader'; @use './components/AnnotationHeader';
@use './components/AnnotationLicense';
@use './components/AnnotationPublishControl'; @use './components/AnnotationPublishControl';
@use './components/AnnotationQuote'; @use './components/AnnotationQuote';
@use './components/AnnotationShareControl'; @use './components/AnnotationShareControl';
@use './components/AnnotationShareInfo'; @use './components/AnnotationShareInfo';
@use './components/AnnotationTimestamps';
@use './components/AnnotationUser';
@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