refactor(datapage): remove article-specific css from shared components

owid · Oct 26, 2023 · 8982954 · 8982954
1 parent 0359837
commit 8982954
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 9 deletions.
diff --git a/packages/@ourworldindata/components/src/IndicatorBrief/IndicatorBrief.scss b/packages/@ourworldindata/components/src/IndicatorBrief/IndicatorBrief.scss
@@ -72,8 +72,18 @@
 
         &__content {
             @include body-2-regular;
-            li {
+            ul {
                 @include body-2-regular;
+                margin-bottom: 16px;
+                margin-left: 16px;
+
+                li {
+                    margin-bottom: 1em;
+
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                }
             }
         }
 

diff --git a/packages/@ourworldindata/components/src/IndicatorBrief/IndicatorBrief.tsx b/packages/@ourworldindata/components/src/IndicatorBrief/IndicatorBrief.tsx
@@ -38,7 +38,7 @@ export const IndicatorBrief = (props: IndicatorBriefProps) => {
                             <div className="about-this-data__indicator-title">
                                 {props.title}
                             </div>
-                            <p className="about-this-data__indicator-description">
+                            <p className="about-this-data__indicator-description simple-markdown-text">
                                 <SimpleMarkdownText
                                     text={props.descriptionShort}
                                 />
@@ -96,16 +96,16 @@ export const IndicatorBrief = (props: IndicatorBriefProps) => {
                         <h3 className="key-info__title">
                             What you should know about this indicator
                         </h3>
-                        <div className="key-info__content">
+                        <div className="key-info__content simple-markdown-text">
                             {props.descriptionKey.length === 1 ? (
                                 <SimpleMarkdownText
                                     text={props.descriptionKey[0]}
                                 />
                             ) : (
-                                <ul className="article-block__list">
+                                <ul>
                                     {props.descriptionKey.map((item, i) => (
                                         <li key={i}>
-                                            <SimpleMarkdownText text={item} />
+                                            <SimpleMarkdownText text={item} />{" "}
                                         </li>
                                     ))}
                                 </ul>
@@ -127,7 +127,7 @@ export const IndicatorBrief = (props: IndicatorBriefProps) => {
                                 : "How does the producer of this data describe this data?"
                         }
                         content={
-                            <div className="article-block__text">
+                            <div className="simple-markdown-text">
                                 <SimpleMarkdownText
                                     text={props.descriptionFromProducer}
                                 />
@@ -143,7 +143,11 @@ export const IndicatorBrief = (props: IndicatorBriefProps) => {
                     <ExpandableToggle
                         label="Additional information about this data"
                         content={
-                            <SimpleMarkdownText text={props.additionalInfo} />
+                            <div className="simple-markdown-text">
+                                <SimpleMarkdownText
+                                    text={props.additionalInfo}
+                                />
+                            </div>
                         }
                     />
                 )}

diff --git a/packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.tsx b/packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.tsx
@@ -39,7 +39,7 @@ export const IndicatorProcessing = (props: IndicatorProcessingProps) => {
                         Notes on our processing step for this indicator
                     </h5>
                     <div className="variable-processing-info__description">
-                        <p className="article-block__text">
+                        <p className="simple-markdown-text">
                             <SimpleMarkdownText
                                 text={props.descriptionProcessing}
                             />

diff --git a/packages/@ourworldindata/components/src/IndicatorSources/IndicatorSources.tsx b/packages/@ourworldindata/components/src/IndicatorSources/IndicatorSources.tsx
@@ -51,7 +51,7 @@ const SourceContent = (props: { source: OriginSubset }) => {
     return (
         <div className="source-content">
             {source.description && (
-                <p className="description">
+                <p className="description simple-markdown-text">
                     <SimpleMarkdownText text={source.description} />
                 </p>
             )}

diff --git a/site/DataPageContent.scss b/site/DataPageContent.scss
@@ -355,4 +355,13 @@
     .wp-code-snippet {
         margin-bottom: 16px;
     }
+
+    .simple-markdown-text {
+        @include body-3-medium;
+
+        a {
+            @include owid-link-60;
+            color: inherit;
+        }
+    }
 }