scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 23:57:55 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

add tag component and fix linting

Browse source
This commit is contained in:
caseymm 2022-05-02 12:04:07 -07:00
parent d68536a3be
commit 384a8e60a5
7 changed files with 173 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/tag/tag.jsx Normal file
View file

@ -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;

74
src/components/tag/tag.scss Normal file
View file

@ -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;
}
}

110
src/views/annual-report/2021/annual-report.jsx
View file

@ -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>

84
src/views/annual-report/2021/annual-report.scss
View file

@ -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;
}
}

4
src/views/annual-report/2021/l10n.json
View file

@ -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.",

3
src/views/annual-report/2021/video-preview-youtube/video-preview-youtube.jsx
View file

@ -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;

8
src/views/annual-report/2021/video-youtube/video-youtube.jsx
View file

@ -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