From 384a8e60a5b2772ce233a2e29df80cf43e0b710e Mon Sep 17 00:00:00 2001
From: caseymm <casey@bocoup.com>
Date: Mon, 2 May 2022 12:04:07 -0700
Subject: [PATCH] add tag component and fix linting

---
 src/components/tag/tag.jsx                    |  18 +++
 src/components/tag/tag.scss                   |  74 ++++++++++++
 .../annual-report/2021/annual-report.jsx      | 110 +++++++++++-------
 .../annual-report/2021/annual-report.scss     |  84 +------------
 src/views/annual-report/2021/l10n.json        |   4 +-
 .../video-preview-youtube.jsx                 |   3 +-
 .../2021/video-youtube/video-youtube.jsx      |   8 +-
 7 files changed, 173 insertions(+), 128 deletions(-)
 create mode 100644 src/components/tag/tag.jsx
 create mode 100644 src/components/tag/tag.scss

diff --git a/src/components/tag/tag.jsx b/src/components/tag/tag.jsx
new file mode 100644
index 000000000..e3b8f5fe7
--- /dev/null
+++ b/src/components/tag/tag.jsx
@@ -0,0 +1,18 @@
+const PropTypes = require('prop-types');
+const React = require('react');
+
+require('./tag.scss');
+
+const Tag = props => (
+    <div className={`${props.type} ${props.color} bubble`}>
+        <span>{props.text}</span>
+    </div>
+);
+
+Tag.propTypes = {
+    type: PropTypes.string,
+    text: PropTypes.string,
+    color: PropTypes.string
+};
+
+module.exports = Tag;
diff --git a/src/components/tag/tag.scss b/src/components/tag/tag.scss
new file mode 100644
index 000000000..263caa202
--- /dev/null
+++ b/src/components/tag/tag.scss
@@ -0,0 +1,74 @@
+@import "../../colors";
+
+$green: #2B732B;
+
+.bubble {
+    background-color: rgba(0,0,0,.15);
+    color: #fff;
+    font-weight: 500;
+    border-radius: 50px;
+    padding: 8px 36px;
+    font-size: 1rem;
+    margin: 15px auto;
+    width: max-content;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    img{
+        margin: 0px 8px;
+        width: 30px;
+        height: 30px;
+    }
+    &.increase{
+        span{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            &:before{
+                content: '';
+                width: 30px;
+                height: 30px;
+                background-image: url("/images/annual-report/2020/Symbols-UI/Arrow_up.svg");
+                background-size: contain;
+                display: inline-block;
+                margin-right: 10px;
+            }
+        }
+    }
+    &.spotlight{
+        &:before{
+            content: '';
+            width: 30px;
+            height: 30px;
+            background-image: url("/images/annual-report/2020/Symbols-UI/LightBulb_spotlightstory.svg");
+            background-size: contain;
+            display: inline-block;
+            margin-right: 10px;
+        }
+    }
+    &.snapshot{
+        &:before{
+            content: '';
+            width: 30px;
+            height: 30px;
+            background-image: url("/images/annual-report/2020/Symbols-UI/Camera_snapshots.svg");
+            background-size: contain;
+            display: inline-block;
+            margin-right: 10px;
+        }
+    }
+
+    &.darken{
+        background-color: rgba(0, 0, 0, 0.15);
+    }
+    &.blue{
+        background-color: $motion-blue-3;
+    }
+
+    &.purple{
+        background-color: $ui-purple-dark;
+    }
+    &.green{
+        background-color: $green;
+    }
+}
\ No newline at end of file
diff --git a/src/views/annual-report/2021/annual-report.jsx b/src/views/annual-report/2021/annual-report.jsx
index 23d8c007e..399233d15 100644
--- a/src/views/annual-report/2021/annual-report.jsx
+++ b/src/views/annual-report/2021/annual-report.jsx
@@ -17,6 +17,7 @@ const TextAndMediaSnippet = require('../../../components/text-and-media-snippet/
 const TimelineCard = require('../../../components/timeline-card/timeline-card.jsx');
 const PeopleGrid = require('../../../components/people-grid/people-grid.jsx');
 const People = require('./people.json');
+const Tag = require('../../../components/tag/tag.jsx');
 const VideoPreview = require('../../../components/video-preview/video-preview.jsx');
 const VideoPreviewYouTube = require('./video-preview-youtube/video-preview-youtube.jsx');
 const Supporters = require('./supporters.json');
@@ -515,9 +516,13 @@ class AnnualReport extends React.Component {
                                         <h4>
                                             <FormattedMessage id="annualReport.2021.reachProjectCreators" />
                                         </h4>
-                                        <div className="increase bubble">
-                                            <FormattedMessage id="annualReport.2021.reachProjectCreatorsIncrease" />
-                                        </div>
+                                        <Tag
+                                            text={this.props.intl.formatMessage(
+                                                    {id: 'annualReport.2021.reachProjectCreatorsIncrease'}
+                                                )}
+                                            color="darken"
+                                            type="increase"
+                                        />
                                     </div>
                                     <div className="reach-datapoint">
                                         <FormattedMessage
@@ -533,9 +538,13 @@ class AnnualReport extends React.Component {
                                         <h4>
                                             <FormattedMessage id="annualReport.2021.reachProjectsCreated" />
                                         </h4>
-                                        <div className="increase bubble">
-                                            <FormattedMessage id="annualReport.2021.reachProjectsCreatedIncrease" />
-                                        </div>
+                                        <Tag
+                                            text={this.props.intl.formatMessage(
+                                                    {id: 'annualReport.2021.reachProjectsCreatedIncrease'}
+                                                )}
+                                            color="darken"
+                                            type="increase"
+                                        />
                                     </div>
                                     <div className="reach-datapoint">
                                         <FormattedMessage
@@ -551,9 +560,13 @@ class AnnualReport extends React.Component {
                                         <h4>
                                             <FormattedMessage id="annualReport.2021.reachNewUsers" />
                                         </h4>
-                                        <div className="increase bubble">
-                                            <FormattedMessage id="annualReport.2021.reachNewUsersIncrease" />
-                                        </div>
+                                        <Tag
+                                            text={this.props.intl.formatMessage(
+                                                    {id: 'annualReport.2021.reachNewUsersIncrease'}
+                                                )}
+                                            color="darken"
+                                            type="increase"
+                                        />
                                     </div>
                                 </div>
                                 <div className="reach-numbers">
@@ -677,18 +690,13 @@ class AnnualReport extends React.Component {
                                 <h4>
                                     <FormattedMessage id="annualReport.2021.reachDownloads" />
                                 </h4>
-                                <div className="increase bubble dark">
-                                    <FormattedMessage
-                                        id="annualReport.2021.reachDownloadsIncrease"
-                                        values={{
-                                            million: (
-                                                <div className="million">
-                                                    <FormattedMessage id="annualReport.2021.reachMillion" />
-                                                </div>
-                                            )
-                                        }}
-                                    />
-                                </div>
+                                <Tag
+                                    text={this.props.intl.formatMessage(
+                                            {id: 'annualReport.2021.reachDownloadsIncrease'}
+                                        )}
+                                    color="darken"
+                                    type="increase dark"
+                                />
                             </div>
                         </div>
                         <MediaQuery minWidth={frameless.mobile}>
@@ -828,9 +836,13 @@ class AnnualReport extends React.Component {
                                     <MediaQuery minWidth={frameless.tabletPortrait}>
                                         <div className="content flex-content">
                                             <div className="text">
-                                                <div className="spotlight bubble SEC">
-                                                    <FormattedMessage id="annualReport.2021.spotlightStory" />
-                                                </div>
+                                                <Tag
+                                                    text={this.props.intl.formatMessage(
+                                                            {id: 'annualReport.2021.spotlightStory'}
+                                                        )}
+                                                    color="blue"
+                                                    type="spotlight"
+                                                />
                                                 <h4>
                                                     <FormattedMessage id="annualReport.2021.SECSpotlightTitle" />
                                                 </h4>
@@ -860,9 +872,13 @@ class AnnualReport extends React.Component {
                                     >
                                         <div className="content flex-content">
                                             <div className="text">
-                                                <div className="spotlight bubble SEC">
-                                                    <FormattedMessage id="annualReport.2021.spotlightStory" />
-                                                </div>
+                                                <Tag
+                                                    text={this.props.intl.formatMessage(
+                                                            {id: 'annualReport.2021.spotlightStory'}
+                                                        )}
+                                                    color="green"
+                                                    type="spotlight"
+                                                />
                                                 <h4>
                                                     <FormattedMessage id="annualReport.2021.SECSpotlightTitle" />
                                                 </h4>
@@ -933,9 +949,13 @@ class AnnualReport extends React.Component {
                                 </div>
                             </div>
                             <div className="world access">
-                                <div className="spotlight bubble access">
-                                    <FormattedMessage id="annualReport.2021.spotlightStory" />
-                                </div>
+                                <Tag
+                                    text={this.props.intl.formatMessage(
+                                            {id: 'annualReport.2021.spotlightStory'}
+                                        )}
+                                    color="green"
+                                    type="spotlight"
+                                />
                                 <h4>
                                     <FormattedMessage id="annualReport.2021.accessASL" />
                                 </h4>
@@ -1220,9 +1240,13 @@ class AnnualReport extends React.Component {
                             {/* 10 new languages */}
                             {/* eslint-disable max-len */}
                             <div className="inner">
-                                <div className="snapshot bubble access left-align languages">
-                                    <FormattedMessage id="annualReport.2021.accessSnapshot" />
-                                </div>
+                                <Tag
+                                    text={this.props.intl.formatMessage(
+                                            {id: 'annualReport.2021.accessSnapshot'}
+                                        )}
+                                    color="green"
+                                    type="snapshot left-align languages"
+                                />
                                 <div className="flex-content">
                                     <div className="text-and-media-snippet regular">
                                         <div className="half">
@@ -1318,9 +1342,13 @@ class AnnualReport extends React.Component {
                             </div>
                             <div className="initiatives-subsection-content">
                                 <div className="world">
-                                    <div className="snapshot bubble community">
-                                        <FormattedMessage id="annualReport.2021.accessSnapshot" />
-                                    </div>
+                                    <Tag
+                                        text={this.props.intl.formatMessage(
+                                                {id: 'annualReport.2021.accessSnapshot'}
+                                            )}
+                                        color="purple"
+                                        type="snapshot"
+                                    />
                                     <h4>
                                         <FormattedMessage id="annualReport.2021.communityScratchConference" />
                                     </h4>
@@ -1658,9 +1686,13 @@ class AnnualReport extends React.Component {
                                 <div className="wide inner community">
                                     <div className="content two-wide split">
                                         <div className="text">
-                                            <div className="snapshot bubble community">
-                                                <FormattedMessage id="annualReport.2021.spotlightStory" />
-                                            </div>
+                                            <Tag
+                                                text={this.props.intl.formatMessage(
+                                                        {id: 'annualReport.2021.spotlightStory'}
+                                                    )}
+                                                color="purple"
+                                                type="snapshot"
+                                            />
                                             <h4>
                                                 <FormattedMessage id="annualReport.2021.communityScratchLabTitle" />
                                             </h4>
diff --git a/src/views/annual-report/2021/annual-report.scss b/src/views/annual-report/2021/annual-report.scss
index f0df71907..6feb21ad4 100644
--- a/src/views/annual-report/2021/annual-report.scss
+++ b/src/views/annual-report/2021/annual-report.scss
@@ -705,90 +705,14 @@ a, a:link, a:visited, a:active{
 }
 
 .bubble {
-    background-color: rgba(0,0,0,.15);
-    color: #fff;
-    font-weight: 500;
-    border-radius: 50px;
-    padding: 8px 36px;
-    font-size: 1rem;
-    margin: 15px auto;
-    width: max-content;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    img{
-        margin: 0px 8px;
-        width: 30px;
-        height: 30px;
-    }
     &.left-align{
         margin: 0 0 20px 0;
     }
-    &.increase{
-        &.dark{
-            // background-color: darken($annual-report-teal, 15%);
-            .million{
-                font-size: 1rem;
-                margin: 0 3px;
-                span:before{
-                    display: none;
-                }
-            }
-        }
-        span{
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            &:before{
-                content: '';
-                width: 30px;
-                height: 30px;
-                background-image: url("/images/annual-report/2020/Symbols-UI/Arrow_up.svg");
-                background-size: contain;
-                display: inline-block;
-                margin-right: 10px;
-            }
-        }
+    &.languages{
+        margin-top: 50px;
     }
-    &.spotlight{
-        &:before{
-            content: '';
-            width: 30px;
-            height: 30px;
-            background-image: url("/images/annual-report/2020/Symbols-UI/LightBulb_spotlightstory.svg");
-            background-size: contain;
-            display: inline-block;
-            margin-right: 10px;
-        }
-    }
-    &.snapshot{
-        &:before{
-            content: '';
-            width: 30px;
-            height: 30px;
-            background-image: url("/images/annual-report/2020/Symbols-UI/Camera_snapshots.svg");
-            background-size: contain;
-            display: inline-block;
-            margin-right: 10px;
-        }
-    }
-
-    &.SEC{
-        background-color: $motion-blue-3;
-    }
-
-    &.community{
-        background-color: $ui-purple-dark;
-    }
-    &.access{
-        background-color: $annual-report-green;
-        &.languages{
-            margin-top: 50px;
-            margin-bottom: -10px;
-            @media #{$intermediate-and-smaller}{
-                margin: 50px auto 10px;
-            }
-        }
+    &.green{
+        padding: 8px 36px;
     }
 }
 
diff --git a/src/views/annual-report/2021/l10n.json b/src/views/annual-report/2021/l10n.json
index eee736343..a70272fbc 100644
--- a/src/views/annual-report/2021/l10n.json
+++ b/src/views/annual-report/2021/l10n.json
@@ -61,7 +61,7 @@
     "annualReport.2021.reachScratchJrBlurb": "ScratchJr is an introductory programming environment that enables young children (ages 5-7) to create their own interactive stories and games.",
     "annualReport.2021.reachDownloadsMillion": "5 {million}",
     "annualReport.2021.reachDownloads": "Downloads in 2021",
-    "annualReport.2021.reachDownloadsIncrease": "2 {million} from 2020",
+    "annualReport.2021.reachDownloadsIncrease": "2 million from 2020",
 
     "annualReport.2021.themesTitle": "Emerging Themes",
     "annualReport.2021.themesDescription": "Amidst ongoing uncertainty from COVID-19, Scratch continued to serve as a key space for young people to connect and create together. In 2021, we focused our efforts on building a strong foundation to equitably support our growing global community and our growing Scratch Team. Our work was centered around three major themes: fostering community, increasing access and accessibility, and developing the Scratch Education Collaborative (SEC).",
@@ -223,7 +223,7 @@
     "annualReport.2021.supportersIntro": "Thank you to our generous supporters. Your contribution helps us expand creative learning opportunities for children of all ages, from all backgrounds, around the globe.",
 
     "annualReport.2021.ourSupporters": "Our Supporters",
-    "annualReport.2021.ourSupportersText": "We want to thank all Scratch supporters who, throughout the years, have helped us create amazing learning experiences for millions of young people around the world. The following list is based on giving to Scratch Foundation from January 1, 2021 to December 31, 2021.",
+    "annualReport.2021.ourSupportersText": "We want to thank all Scratch supporters who, throughout the years, have helped us amazing learning experiences for millions of young people around the world. The following list is based on giving to Scratch Foundation from January 1, 2021 to December 31, 2021.",
 
     "annualReport.2021.supportersFoundingTitle": "Founding Partners — $10,000,000+",
     "annualReport.2021.supportersFoundingText": "We are especially grateful to our Founding Partners who have each provided at least $10,000,000 in cumulative support, since the start of Scratch in 2003.",
diff --git a/src/views/annual-report/2021/video-preview-youtube/video-preview-youtube.jsx b/src/views/annual-report/2021/video-preview-youtube/video-preview-youtube.jsx
index 7ece4c90f..762ea246a 100644
--- a/src/views/annual-report/2021/video-preview-youtube/video-preview-youtube.jsx
+++ b/src/views/annual-report/2021/video-preview-youtube/video-preview-youtube.jsx
@@ -95,8 +95,7 @@ VideoPreviewYouTube.propTypes = {
     videoHeight: PropTypes.string,
     videoId: PropTypes.string.isRequired,
     videoWidth: PropTypes.string,
-    alt: PropTypes.string,
-    spinnerColor: PropTypes.string
+    alt: PropTypes.string
 };
 
 module.exports = VideoPreviewYouTube;
diff --git a/src/views/annual-report/2021/video-youtube/video-youtube.jsx b/src/views/annual-report/2021/video-youtube/video-youtube.jsx
index d4e7a3444..95493a8f1 100644
--- a/src/views/annual-report/2021/video-youtube/video-youtube.jsx
+++ b/src/views/annual-report/2021/video-youtube/video-youtube.jsx
@@ -4,17 +4,15 @@ const classNames = require('classnames');
 
 require('./video-youtube.scss');
 
+// eslint-disable-next-line react/prefer-stateless-function
 class VideoYoutube extends React.Component {
-    constructor (props) {
-        super(props);
-    }
 
     render () {
         return (
             <div className={classNames('video-player', this.props.className)}>
                 <iframe
                     allowFullScreen
-                    className='wistia_embed'
+                    className="wistia_embed"
                     frameBorder="0" // deprecated attribute
                     height={this.props.height}
                     scrolling="no" // deprecated attribute
@@ -26,6 +24,7 @@ class VideoYoutube extends React.Component {
         );
     }
 }
+
 VideoYoutube.defaultProps = {
     height: '225',
     title: '',
@@ -35,7 +34,6 @@ VideoYoutube.defaultProps = {
 VideoYoutube.propTypes = {
     className: PropTypes.string,
     height: PropTypes.string.isRequired,
-    onVideoStart: PropTypes.func,
     title: PropTypes.string.isRequired,
     videoId: PropTypes.string.isRequired,
     width: PropTypes.string.isRequired