Skip to content

Commit

Permalink
Change DoDs to be spans instead of links (#3815)
Browse files Browse the repository at this point in the history
They don't link to anything and should not be rendered as links in HTML
for cases like an Atom feed.

---------

Co-authored-by: Marcel Gerber <[email protected]>
  • Loading branch information
rakyi and marcelgerber authored Jul 30, 2024
1 parent d126305 commit bfd1b37
Show file tree
Hide file tree
Showing 10 changed files with 29 additions and 41 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -316,10 +316,13 @@ export class IRDetailOnDemand extends IRElement {
}
toHTML(key?: React.Key): React.ReactElement {
return (
<span key={key}>
<a className="dod-span" data-id={this.term}>
{this.children.map((child, i) => child.toHTML(i))}
</a>
<span
key={key}
className="dod-span"
data-id={this.term}
tabIndex={0}
>
{this.children.map((child, i) => child.toHTML(i))}
</span>
)
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,11 @@ function transformDodLinks() {
// to capture the term
const match = node.properties.href.match(/#dod:(?<term>.+)/)
if (match) {
node.tagName = "span"
node.properties.class = "dod-span"
node.properties["data-id"] = match.groups?.term
node.properties["aria-expanded"] = "false"
node.properties["tabindex"] = 0
delete node.properties.href
}
//node.children.push(
Expand Down
9 changes: 9 additions & 0 deletions packages/@ourworldindata/components/src/styles/mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,15 @@
}
}

@mixin dod-span {
border-bottom: 1px dotted $blue-90;
cursor: help;

span {
pointer-events: none;
}
}

@mixin info {
font-size: 0.875rem;

Expand Down
9 changes: 2 additions & 7 deletions packages/@ourworldindata/grapher/src/core/grapher.scss
Original file line number Diff line number Diff line change
Expand Up @@ -243,12 +243,7 @@ $zindex-controls-drawer: 150;
margin-bottom: 2px;
}

a.dod-span {
border-bottom: 1px dotted #666;
text-decoration: none;

&:hover {
text-decoration: none;
}
.dod-span {
@include dod-span;
}
}
2 changes: 1 addition & 1 deletion packages/@ourworldindata/grapher/src/footer/Footer.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
}

.sources a.learn-more-about-data,
.note a:not(.dod-span) {
.note a {
text-decoration: underline;

&:hover {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,6 @@
color: inherit;
text-decoration: underline;

// DoD spans should be dotted via the border, not underlined
&.dod-span {
text-decoration: none;
}

&:hover {
text-decoration: none;
}
Expand Down
5 changes: 0 additions & 5 deletions packages/@ourworldindata/grapher/src/modal/SourcesModal.scss
Original file line number Diff line number Diff line change
Expand Up @@ -142,11 +142,6 @@
&:hover {
text-decoration: none;
}

// DoD spans should be dotted via the border, not underlined
&.dod-span {
text-decoration: none;
}
}

.heading {
Expand Down
5 changes: 0 additions & 5 deletions site/KeyDataTable.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,6 @@
a {
@include owid-link-90;
color: inherit;

// DoD spans should be dotted via the border, not underlined
&.dod-span {
text-decoration: none;
}
}
}

Expand Down
7 changes: 1 addition & 6 deletions site/detailsOnDemand.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,7 @@
}

.dod-span {
color: inherit;
border-bottom: 1px dotted #1d3d63;

span {
pointer-events: none;
}
@include dod-span;
}

// Specificity trump to overwrite the Grapher styles when inside a dod
Expand Down
15 changes: 7 additions & 8 deletions site/gdocs/utils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -203,14 +203,13 @@ export function renderSpan(
)
)
.with({ spanType: "span-dod" }, (span) => (
<span key={key}>
{shouldRenderLinks ? (
<a data-id={`${span.id}`} className="dod-span">
{renderSpans(span.children)}
</a>
) : (
<span>{renderSpans(span.children)}</span>
)}
<span
key={key}
className="dod-span"
data-id={`${span.id}`}
tabIndex={0}
>
{renderSpans(span.children)}
</span>
))
.with({ spanType: "span-newline" }, () => <br key={key} />)
Expand Down

0 comments on commit bfd1b37

Please sign in to comment.