💄 render descriptionShort as markdown, fix DoD link display #2958
Conversation
|
Current dependencies on/for this PR:
This stack of pull requests is managed by Graphite. |
| @@ -822,7 +822,11 @@ const KeyDataTable = (props: { | |||
| <div className="key-data__title key-data-description-short__title"> | |||
| {datapageData.title} | |||
| </div> | |||
| <div>{datapageData.descriptionShort}</div> | |||
| <div> | |||
| <SimpleMarkdownText | |||
There was a problem hiding this comment.
The new renderer by default wraps any text into a paragraph which adds unwanted vertical space. I added an option called useParagraphs for single-liners specifically that – if set to false – disables that beaviour. It would be good to use that here.
<SimpleMarkdownText text={...} useParagraphs={false} />There was a problem hiding this comment.
Or, alternatively, if we expect descriptionShort be have multiple paragraphs, then it would be good to set the p margins to 0 here.
There was a problem hiding this comment.
Good to know! The ETL guidelines say that this should be a single paragraph so I'll go with useParagraphs=false. Thank you!
DoD links should not be underlined
danyx23
force-pushed
the
data-pages-dod-fixes
branch
from
c863d7b to
0d59680
Compare
| @@ -393,7 +394,7 @@ export class Source extends React.Component<{ | |||
| <div className="source"> | |||
| {this.renderTitle()} | |||
| {this.def.descriptionShort && ( | |||
| <p>{this.def.descriptionShort}</p> | |||
| <SimpleMarkdownText text={this.def.descriptionShort} /> | |||
There was a problem hiding this comment.
@sophiamersmann should we add the useParagraphs stanca here as well then?
There was a problem hiding this comment.
Since the old code wraps descriptionShort in a paragraph as well, I would leave it as is here.
This PR renders descriptionShort as markdown and makes sure that DoD links are not underlined and instead retain the style they have site-wide.
I don't know if there is a better way to make sure that links that have the dod-span class are not underlined - @sophiamersmann if you would prefer another way of doing this in CSS then please let me know! 🙏