-
-
Notifications
You must be signed in to change notification settings - Fork 229
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🤹merge changes from refactor-datapage-indicator-components
- Loading branch information
Showing
22 changed files
with
792 additions
and
543 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
129 changes: 0 additions & 129 deletions
129
packages/@ourworldindata/components/src/IndicatorBrief/IndicatorBrief.tsx
This file was deleted.
Oops, something went wrong.
44 changes: 44 additions & 0 deletions
44
packages/@ourworldindata/components/src/IndicatorDescriptions/IndicatorDescriptions.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| .indicator-key-description { | ||
| .key-info { | ||
| background-color: $gray-10; | ||
| border-left: 4px solid $blue-10; | ||
| padding: 40px; | ||
| margin: 0 -40px; | ||
|
|
||
| &__title { | ||
| @include h5-black-caps; | ||
| color: $blue-50; | ||
| margin-top: 0; | ||
| margin-bottom: 16px; | ||
| } | ||
|
|
||
| &__content { | ||
| @include body-2-regular; | ||
| ul { | ||
| @include body-2-regular; | ||
| margin-left: 16px; | ||
|
|
||
| li { | ||
| margin-bottom: 1em; | ||
|
|
||
| &:last-child { | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &__learn-more { | ||
| @include expandable-paragraph__expand-button--full; | ||
| margin-top: 24px; | ||
| svg { | ||
| font-size: 0.75em; | ||
| margin-left: 12px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .expandable-info-blocks { | ||
| margin-top: 32px; | ||
| } | ||
| } |
87 changes: 87 additions & 0 deletions
87
packages/@ourworldindata/components/src/IndicatorDescriptions/IndicatorDescriptions.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import React from "react" | ||
| import { faArrowDown } from "@fortawesome/free-solid-svg-icons/faArrowDown" | ||
| import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js" | ||
| import { ExpandableToggle } from "../ExpandableToggle/ExpandableToggle.js" | ||
| import { SimpleMarkdownText } from "../SimpleMarkdownText.js" | ||
|
|
||
| interface IndicatorDescriptionsProps { | ||
| descriptionShort?: string | ||
| descriptionKey?: string[] | ||
| descriptionFromProducer?: string | ||
| attributionShort?: string | ||
| additionalInfo?: string | ||
| canonicalUrl?: string | ||
| hasFaqEntries: boolean | ||
| } | ||
|
|
||
| export const IndicatorDescriptions = (props: IndicatorDescriptionsProps) => { | ||
| return ( | ||
| <div className="indicator-key-description"> | ||
| {props.descriptionKey && props.descriptionKey.length > 0 && ( | ||
| <div className="key-info"> | ||
| <h3 className="key-info__title"> | ||
| What you should know about this data | ||
| </h3> | ||
| <div className="key-info__content simple-markdown-text"> | ||
| {props.descriptionKey.length === 1 ? ( | ||
| <SimpleMarkdownText | ||
| text={props.descriptionKey[0]} | ||
| /> | ||
| ) : ( | ||
| <ul> | ||
| {props.descriptionKey.map((item, i) => ( | ||
| <li key={i}> | ||
| <SimpleMarkdownText text={item} />{" "} | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| )} | ||
| </div> | ||
| {props.hasFaqEntries && ( | ||
| <a | ||
| className="key-info__learn-more" | ||
| href={(props.canonicalUrl ?? "") + "#faqs"} | ||
| > | ||
| Learn more in the FAQs | ||
| <FontAwesomeIcon icon={faArrowDown} /> | ||
| </a> | ||
| )} | ||
| </div> | ||
| )} | ||
| <div className="expandable-info-blocks"> | ||
| {props.descriptionFromProducer && ( | ||
| <ExpandableToggle | ||
| label={ | ||
| props.attributionShort | ||
| ? `How does the producer of this data - ${props.attributionShort} - describe this data?` | ||
| : "How does the producer of this data describe this data?" | ||
| } | ||
| content={ | ||
| <div className="simple-markdown-text"> | ||
| <SimpleMarkdownText | ||
| text={props.descriptionFromProducer} | ||
| /> | ||
| </div> | ||
| } | ||
| isExpandedDefault={ | ||
| !(props.descriptionShort || props.descriptionKey) | ||
| } | ||
| isStacked={!!props.additionalInfo} | ||
| /> | ||
| )} | ||
| {props.additionalInfo && ( | ||
| <ExpandableToggle | ||
| label="Additional information about this data" | ||
| content={ | ||
| <div className="simple-markdown-text"> | ||
| <SimpleMarkdownText | ||
| text={props.additionalInfo} | ||
| /> | ||
| </div> | ||
| } | ||
| /> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
41 changes: 41 additions & 0 deletions
41
packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| .indicator-key-data { | ||
| @include body-3-medium; | ||
|
|
||
| border-top: 1px solid $blue-20; | ||
| border-bottom: 1px solid $blue-20; | ||
|
|
||
| display: grid; | ||
| grid-template-columns: repeat(2, 1fr); | ||
|
|
||
| .indicator-key-data-item { | ||
| display: flex; | ||
| padding: 16px 24px 16px 0; | ||
|
|
||
| @include sm-only { | ||
| display: block; | ||
| } | ||
|
|
||
| + .indicator-key-data-item { | ||
| border-top: 1px solid $blue-20; | ||
| } | ||
|
|
||
| &__title { | ||
| flex: 0 0 140px; // using a fixed width here to make sure the content is aligned | ||
| margin-right: 24px; | ||
| color: $blue-50; | ||
|
|
||
| @include sm-only { | ||
| margin-right: 0; | ||
| } | ||
| } | ||
|
|
||
| &--span { | ||
| grid-column: 1 / -1; | ||
| } | ||
| } | ||
|
|
||
| a { | ||
| @include owid-link-90; | ||
| color: inherit; | ||
| } | ||
| } |
Oops, something went wrong.