-
-
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.
Data page: About this data (& refactor shared components) (#2853)
### Description
Implements the redesigned About this data section and refactors shared data page components.
**About this data section:**
- Updating the design meant adding a few pieces of metadata, including `unit`, `additionalInfo` and the indicator's `title`
**Refactor:**
- Component-specific styles are moved into a scss file next to the component file
- Grid-related styles and classes are removed (shared components simply take up the full width of the parent container)
- `<IndicatorBrief />` is split into two components, `<IndicatorKeyData />` and `<IndicatorDescriptions />` (makes it a little easier for the sources modal)
- Metadata helper functions are moved into `metadataHelpers.ts` in the utils folder
**Other changes:**
- I didn't touch any of the logic; with some exceptions (hehe)
- Origins are deduplicated based on their label (name of producer, title of data product)
- The heading of a source shows the producer and title of the data product (needs Marwa's input)
- I fixed minor visual glitches
### Open questions
- Should we keep referring to indicators in code as "variables", or do we want to start using both terms interchangeably?- Loading branch information
Showing
23 changed files
with
796 additions
and
544 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
1 change: 0 additions & 1 deletion
1
packages/@ourworldindata/components/src/ExpandableToggle/ExpandableToggle.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
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; | ||
| } | ||
| } |
89 changes: 89 additions & 0 deletions
89
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,89 @@ | ||
| 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].trim()} | ||
| /> | ||
| ) : ( | ||
| <ul> | ||
| {props.descriptionKey.map((text, i) => ( | ||
| <li key={i}> | ||
| <SimpleMarkdownText | ||
| text={text.trim()} | ||
| />{" "} | ||
| </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.trim()} | ||
| /> | ||
| </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.trim()} | ||
| /> | ||
| </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.