Commit 76d03be3 authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner

Adjust styling on document metadata

Make sure document titles that are not linked don't look like links.
parent bc58c21c
...@@ -17,17 +17,13 @@ import propTypes from 'prop-types'; ...@@ -17,17 +17,13 @@ import propTypes from 'prop-types';
*/ */
export default function AnnotationDocumentInfo({ domain, link, title }) { export default function AnnotationDocumentInfo({ domain, link, title }) {
return ( return (
<div className="AnnotationDocumentInfo u-layout-row u-horizontal-rhythm"> <div className="u-layout-row u-horizontal-rhythm">
<div className="AnnotationDocumentInfo__title u-color-text--muted"> <div className="u-color-text--muted">
on &quot; on &quot;
{link ? <a href={link}>{title}</a> : <span>{title}</span>} {link ? <a href={link}>{title}</a> : <span>{title}</span>}
&quot; &quot;
</div> </div>
{domain && ( {domain && <span className="u-color-text--muted">({domain})</span>}
<div className="AnnotationDocumentInfo__domain u-color-text--muted">
({domain})
</div>
)}
</div> </div>
); );
} }
......
...@@ -80,13 +80,16 @@ export default function AnnotationTimestamps({ ...@@ -80,13 +80,16 @@ export default function AnnotationTimestamps({
return ( return (
<div className="AnnotationTimestamps"> <div className="AnnotationTimestamps">
{withEditedTimestamp && ( {withEditedTimestamp && (
<span className="AnnotationTimestamps__edited" title={updated.absolute}> <span
className="AnnotationTimestamps__timestamp AnnotationTimestamps__edited"
title={updated.absolute}
>
({editedString}){' '} ({editedString}){' '}
</span> </span>
)} )}
{annotationUrl ? ( {annotationUrl ? (
<a <a
className="AnnotationTimestamps__created" className="AnnotationTimestamps__timestamp AnnotationTimestamps__timestamp--linked"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
title={created.absolute} title={created.absolute}
...@@ -96,7 +99,7 @@ export default function AnnotationTimestamps({ ...@@ -96,7 +99,7 @@ export default function AnnotationTimestamps({
</a> </a>
) : ( ) : (
<span <span
className="AnnotationTimestamps__created" className="AnnotationTimestamps__timestamp AnnotationTimestamps__created"
title={created.absolute} title={created.absolute}
> >
{created.relative} {created.relative}
......
...@@ -18,23 +18,21 @@ describe('AnnotationDocumentInfo', () => { ...@@ -18,23 +18,21 @@ describe('AnnotationDocumentInfo', () => {
it('should render the document title', () => { it('should render the document title', () => {
const wrapper = createAnnotationDocumentInfo(); const wrapper = createAnnotationDocumentInfo();
const info = wrapper.find('.AnnotationDocumentInfo__title');
assert.equal(info.text(), 'on "Turtles"'); assert.include(wrapper.text(), '"Turtles"');
}); });
it('should render a link if available', () => { it('should render a link if available', () => {
const wrapper = createAnnotationDocumentInfo(); const wrapper = createAnnotationDocumentInfo();
const link = wrapper.find('.AnnotationDocumentInfo__title a'); const link = wrapper.find('a');
assert.equal(link.prop('href'), 'http://www.baz'); assert.equal(link.prop('href'), 'http://www.baz');
}); });
it('should render domain if available', () => { it('should render domain if available', () => {
const wrapper = createAnnotationDocumentInfo(); const wrapper = createAnnotationDocumentInfo();
const domain = wrapper.find('.AnnotationDocumentInfo__domain');
assert.equal(domain.text(), '(www.foo.bar)'); assert.include(wrapper.text(), '(www.foo.bar)');
}); });
it( it(
......
...@@ -46,7 +46,7 @@ describe('AnnotationTimestamps', () => { ...@@ -46,7 +46,7 @@ describe('AnnotationTimestamps', () => {
it('renders a linked created timestamp if annotation has a link', () => { it('renders a linked created timestamp if annotation has a link', () => {
const wrapper = createComponent(); const wrapper = createComponent();
const link = wrapper.find('a.AnnotationTimestamps__created'); const link = wrapper.find('a');
assert.equal(link.prop('href'), 'http://www.example.com'); assert.equal(link.prop('href'), 'http://www.example.com');
assert.equal(link.prop('title'), 'absolute date'); assert.equal(link.prop('title'), 'absolute date');
assert.equal(link.text(), 'fuzzy string'); assert.equal(link.text(), 'fuzzy string');
...@@ -55,7 +55,7 @@ describe('AnnotationTimestamps', () => { ...@@ -55,7 +55,7 @@ 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.AnnotationTimestamps__created'); const link = wrapper.find('a');
const span = wrapper.find('span.AnnotationTimestamps__created'); const span = wrapper.find('span.AnnotationTimestamps__created');
assert.isFalse(link.exists()); assert.isFalse(link.exists());
assert.isTrue(span.exists()); assert.isTrue(span.exists());
......
...@@ -2,16 +2,19 @@ ...@@ -2,16 +2,19 @@
@use "../../mixins/utils"; @use "../../mixins/utils";
.AnnotationTimestamps { .AnnotationTimestamps {
&__edited { &__timestamp {
@include utils.font--small;
font-style: italic;
color: var.$color-text--light; color: var.$color-text--light;
}
&__created { &--linked {
color: var.$color-text--light; &:hover {
&:hover { color: var.$color-text--light;
text-decoration: underline; text-decoration: underline;
}
} }
} }
&__edited {
@include utils.font--small;
font-style: italic;
}
} }
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