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

Merge pull request #6768 from LLK/release/2022-05-04

Browse source 
[Master] release/2022-05-04
This commit is contained in:
Karishma Chadha 2022-05-05 10:09:22 -04:00 committed by GitHub
commit 89e219dddb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
34 changed files with 1901 additions and 617 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
README.md
View file

@ -207,21 +207,38 @@ By default, tests run against our Staging instance, but you can pass in a differ
location with the ROOT_URL environment variable (see below) if you want to run the
tests against another location--for instance, your local build.
We are transitioning from using TAP to using Jest as our testing framework,
so for the time being our tests run using both.
All of our integration tests use Jest as our testing framework.
#### Running the tests
To run all integration tests from the command-line:
```bash
SMOKE_USERNAME=username SMOKE_PASSWORD=password ROOT_URL=https://scratch.mit.edu TEST_PROJECT_ID=1 npm run test:integration
SMOKE_USERNAME=username SMOKE_PASSWORD=password ROOT_URL=https://scratch.mit.edu UNOWNED_SHARED_PROJECT_ID=# UNOWNED_UNSHARED_PROJECT_ID=# OWNED_SHARED_PROJECT_ID=# OWNED_UNSHARED_PROJECT_ID=# npm run test:integration
```
Both the TAP and Jest tests use the same username and password. The Jest tests will also use the the username you give with a 1 (soon to be higher numbers as well) appended to the end of it. So if you use the username "test" it will also use the username "test1." Make sure you have created accounts with this pattern and use the same password for all accounts involved.
The project page tests require a project id included as an environment variable to pass. The project must be shared and must have at least one remix. At this time, the project does not need to be owned by one of the test users, but that is likely to change.
#### Usernames/Password for the tests
The tests use multiple users with similar usernames and the same password. They use the the username you pass in with SMOKE_USERNAME as well as the same username with a 1, 2, 3, 4, 5, and 6 (soon to be higher numbers as well) appended to the end of it. So if you use the username "test" it will also use the username "test1", "test2", "test3", etc. Make sure you have created accounts with this pattern and use the same password for all accounts involved.
You can use any set of usernames that fit this pattern. Each account needs to share the same password, which is passed in as SMOKE_PASSWORD.
#### Environment Variables
Several environment variables need to be passed in for the tests to run. Most of them have defaults that point to the staging server.
* SMOKE_USERNAME - Root username used for tests that sign in. See the Usernames section above
* SMOKE_PASSWORD - Password for all accounts used in the tests
* UNOWNED_SHARED_PROJECT_ID - ID for a shared project owned by [testuser]2 This project should have at least one remix. Remix it with another of the [testuser] accounts. Used in the project-page tests.
* OWNED_SHARED_PROJECT_ID - ID for a shared project owned by [testuser]6. Used in the project-page tests.
* UNOWNED_UNSHARED_PROJECT_ID - ID for an unshared project owned by [testuser]2. It is used in tests where it is opened by [testuser]6 in the project-page tests.
* OWNED_UNSHARED_PROJECT_ID - ID for an unshared project owned by [testuser]6. It will be opened by its owner in the project-page tests.
* SAUCE_USERNAME - Username for a saucelabs account. Only used when running tests remotely with test:integration:remote
* SAUCE_ACCESS_KEY - Access token used by the saucelabs account included. Only used when running tests remotely with test:integration:remote
* SMOKE_REMOTE - Boolean to set whether to use saucelabs to run tests remotely. Set to true automatically when running tests with test:integration:remote, otherwise defaults to false.
* RATE_LIMIT_CHECK - A URL that triggers clearing the studio creation rate limit for very specific accounts. This is needed for the my-stuff tests to test studio creation, ensuring they run the same every time. This needs to be setup separately.
### Run a single test file
To run a single file from the command-line using Jest:
```bash

124
package-lock.json generated
View file

@ -99,8 +99,8 @@
"regenerator-runtime": "0.13.9",
"sass": "1.49.7",
"sass-loader": "10.2.1",
"scratch-gui": "0.1.0-prerelease.20220426200048",
"scratch-l10n": "3.14.20220427031558",
"scratch-gui": "0.1.0-prerelease.20220504060134",
"scratch-l10n": "3.14.20220504031551",
"selenium-webdriver": "4.1.0",
"slick-carousel": "1.6.0",
"style-loader": "0.12.3",
@ -22850,21 +22850,21 @@
}
},
"node_modules/scratch-blocks": {
"version": "0.1.0-prerelease.20220329103322",
"resolved": "https://registry.npmjs.org/scratch-blocks/-/scratch-blocks-0.1.0-prerelease.20220329103322.tgz",
"integrity": "sha512-grVZZ41HsHVEpHFkWWkfJ6ukjSFqa6hiGReM5AI00pwDfbiHb9Nlti5R+pHs1kQljE9fsH7BUAwEKBGp1TTi0w==",
"version": "0.1.0-prerelease.20220501111245",
"resolved": "https://registry.npmjs.org/scratch-blocks/-/scratch-blocks-0.1.0-prerelease.20220501111245.tgz",
"integrity": "sha512-OVebiUFtr/15yjEq4gd+6GI4JPAs5UG2SGe+/Zx+z3gVuIRjgkusCmAc5QexNOGypf91nnQQCVCocvk7QdhB8Q==",
"dev": true,
"dependencies": {
"exports-loader": "0.6.3",
"google-closure-library": "20190301.0.0",
"imports-loader": "0.6.5",
"scratch-l10n": "3.14.20220329031539"
"scratch-l10n": "3.14.20220428031608"
}
},
"node_modules/scratch-blocks/node_modules/scratch-l10n": {
"version": "3.14.20220329031539",
"resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.14.20220329031539.tgz",
"integrity": "sha512-mR425IM+JPXv0ByuIOw5QZP5Md9JIKLGaI348pgKMdOYZ0hZhJ5OZ3umVUs64LdZbDwnfsQRnIWA8WYYy6UiDg==",
"version": "3.14.20220428031608",
"resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.14.20220428031608.tgz",
"integrity": "sha512-FloINfIeRWPVnhdLV+gwStq6Zo2JkK0StjVraA1ueLj0Qf42owSWpn0ByYUHPfRx50KoB9hvMr6f0JYZuMzjMg==",
"dev": true,
"dependencies": {
"@babel/cli": "^7.1.2",
@ -22878,9 +22878,9 @@
}
},
"node_modules/scratch-gui": {
"version": "0.1.0-prerelease.20220426200048",
"resolved": "https://registry.npmjs.org/scratch-gui/-/scratch-gui-0.1.0-prerelease.20220426200048.tgz",
"integrity": "sha512-sGT8bPuoySfu6GJ+73DeUdxIcigmgApdVX0nfaQmAbUjyCjxDFxMibkCTCtIfi+DMaEMUOflvGs/cZmX+PZ44Q==",
"version": "0.1.0-prerelease.20220504060134",
"resolved": "https://registry.npmjs.org/scratch-gui/-/scratch-gui-0.1.0-prerelease.20220504060134.tgz",
"integrity": "sha512-MVFfuAxDAZG7s+apaGyGLom2WiH2R7gBBesYJl3tkMFDa28BBquasHuEBMaNYGj4Bt+rWqIIiBVyysY7RpiYLw==",
"dev": true,
"dependencies": {
"arraybuffer-loader": "^1.0.6",
@ -22931,14 +22931,14 @@
"redux": "3.7.2",
"redux-throttle": "0.1.1",
"scratch-audio": "0.1.0-prerelease.20200528195344",
"scratch-blocks": "0.1.0-prerelease.20220329103322",
"scratch-l10n": "3.14.20220426031558",
"scratch-paint": "0.2.0-prerelease.20220426120240",
"scratch-blocks": "0.1.0-prerelease.20220501111245",
"scratch-l10n": "3.14.20220504031551",
"scratch-paint": "0.2.0-prerelease.20220429193038",
"scratch-render": "0.1.0-prerelease.20211028200436",
"scratch-render-fonts": "1.0.0-prerelease.20210401210003",
"scratch-storage": "1.3.5",
"scratch-svg-renderer": "0.2.0-prerelease.20210727023023",
"scratch-vm": "0.2.0-prerelease.20220426104209",
"scratch-vm": "0.2.0-prerelease.20220501145413",
"startaudiocontext": "1.2.1",
"style-loader": "^0.23.0",
"text-encoding": "0.7.0",
@ -23227,26 +23227,10 @@
"symbol-observable": "^1.0.3"
}
},
"node_modules/scratch-gui/node_modules/scratch-l10n": {
"version": "3.14.20220426031558",
"resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.14.20220426031558.tgz",
"integrity": "sha512-SgQ4Zd4LX9rTYvRpRhJitV7I0BIJFLBAyISogpDZNKIA7OAx3Fr5FvUofarUumZxoTmSdjzqDezZJpP4/u7+7w==",
"dev": true,
"dependencies": {
"@babel/cli": "^7.1.2",
"@babel/core": "^7.1.2",
"babel-plugin-react-intl": "^3.0.1",
"transifex": "1.6.6"
},
"bin": {
"build-i18n-src": "scripts/build-i18n-src.js",
"tx-push-src": "scripts/tx-push-src.js"
}
},
"node_modules/scratch-gui/node_modules/scratch-paint": {
"version": "0.2.0-prerelease.20220426120240",
"resolved": "https://registry.npmjs.org/scratch-paint/-/scratch-paint-0.2.0-prerelease.20220426120240.tgz",
"integrity": "sha512-0hxmE9qHg+8Kka3Dc29Jml2PbUjrji0bS4sYXkh2JRMO1IZVUyWLcr9ju+rvu4DjiZee2X0bVTUGeGc73qSpHw==",
"version": "0.2.0-prerelease.20220429193038",
"resolved": "https://registry.npmjs.org/scratch-paint/-/scratch-paint-0.2.0-prerelease.20220429193038.tgz",
"integrity": "sha512-1jCa4ieYjMOc/nKrOlcGCG0DtseR+YAapIYHlraUO6DGHTBm2frB//CDkEHwOIlN54ZPOak2WS4oJYKDuFgqEQ==",
"dev": true,
"dependencies": {
"@scratch/paper": "0.11.20200728195508",
@ -23346,9 +23330,9 @@
}
},
"node_modules/scratch-l10n": {
"version": "3.14.20220427031558",
"resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.14.20220427031558.tgz",
"integrity": "sha512-0qdms1YJ4cZyHVpdLhfDU4c2VGbPWtGDCm+pfFUCkP3dpkFLn20iJwzIlNTzznVXMqa4WsC/qDfaMyLtGNcEtw==",
"version": "3.14.20220504031551",
"resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.14.20220504031551.tgz",
"integrity": "sha512-X65xULMmmUrSrKf+dEplskLg+HcFQWc6hzAJN7x8/j5O252v5z7SKrJbLhH1lzmtHyGfeLgiy6aHOfzt1TmCnA==",
"dev": true,
"dependencies": {
"@babel/cli": "^7.1.2",
@ -23544,9 +23528,9 @@
"dev": true
},
"node_modules/scratch-vm": {
"version": "0.2.0-prerelease.20220426104209",
"resolved": "https://registry.npmjs.org/scratch-vm/-/scratch-vm-0.2.0-prerelease.20220426104209.tgz",
"integrity": "sha512-8k1EHPStDNWDMm459z+FmBE3P17Qfivdo4ThHtMPJysWCBLLG65DPl4fQ4+Wl9AgP/XHhO1nwTdZiNkVHxetCQ==",
"version": "0.2.0-prerelease.20220501145413",
"resolved": "https://registry.npmjs.org/scratch-vm/-/scratch-vm-0.2.0-prerelease.20220501145413.tgz",
"integrity": "sha512-M6uETr2H3mnroeTAdO23TsQSg25yLXjmCzARj6Nrj4uZLHgxEmOx94kJItjdfYZ/N/+koGELSj9xzvL2gxalxA==",
"dev": true,
"dependencies": {
"@vernier/godirect": "1.5.0",
@ -50759,21 +50743,21 @@
}
},
"scratch-blocks": {
"version": "0.1.0-prerelease.20220329103322",
"resolved": "https://registry.npmjs.org/scratch-blocks/-/scratch-blocks-0.1.0-prerelease.20220329103322.tgz",
"integrity": "sha512-grVZZ41HsHVEpHFkWWkfJ6ukjSFqa6hiGReM5AI00pwDfbiHb9Nlti5R+pHs1kQljE9fsH7BUAwEKBGp1TTi0w==",
"version": "0.1.0-prerelease.20220501111245",
"resolved": "https://registry.npmjs.org/scratch-blocks/-/scratch-blocks-0.1.0-prerelease.20220501111245.tgz",
"integrity": "sha512-OVebiUFtr/15yjEq4gd+6GI4JPAs5UG2SGe+/Zx+z3gVuIRjgkusCmAc5QexNOGypf91nnQQCVCocvk7QdhB8Q==",
"dev": true,
"requires": {
"exports-loader": "0.6.3",
"google-closure-library": "20190301.0.0",
"imports-loader": "0.6.5",
"scratch-l10n": "3.14.20220329031539"
"scratch-l10n": "3.14.20220428031608"
},
"dependencies": {
"scratch-l10n": {
"version": "3.14.20220329031539",
"resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.14.20220329031539.tgz",
"integrity": "sha512-mR425IM+JPXv0ByuIOw5QZP5Md9JIKLGaI348pgKMdOYZ0hZhJ5OZ3umVUs64LdZbDwnfsQRnIWA8WYYy6UiDg==",
"version": "3.14.20220428031608",
"resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.14.20220428031608.tgz",
"integrity": "sha512-FloINfIeRWPVnhdLV+gwStq6Zo2JkK0StjVraA1ueLj0Qf42owSWpn0ByYUHPfRx50KoB9hvMr6f0JYZuMzjMg==",
"dev": true,
"requires": {
"@babel/cli": "^7.1.2",
@ -50785,9 +50769,9 @@
}
},
"scratch-gui": {
"version": "0.1.0-prerelease.20220426200048",
"resolved": "https://registry.npmjs.org/scratch-gui/-/scratch-gui-0.1.0-prerelease.20220426200048.tgz",
"integrity": "sha512-sGT8bPuoySfu6GJ+73DeUdxIcigmgApdVX0nfaQmAbUjyCjxDFxMibkCTCtIfi+DMaEMUOflvGs/cZmX+PZ44Q==",
"version": "0.1.0-prerelease.20220504060134",
"resolved": "https://registry.npmjs.org/scratch-gui/-/scratch-gui-0.1.0-prerelease.20220504060134.tgz",
"integrity": "sha512-MVFfuAxDAZG7s+apaGyGLom2WiH2R7gBBesYJl3tkMFDa28BBquasHuEBMaNYGj4Bt+rWqIIiBVyysY7RpiYLw==",
"dev": true,
"requires": {
"arraybuffer-loader": "^1.0.6",
@ -50838,14 +50822,14 @@
"redux": "3.7.2",
"redux-throttle": "0.1.1",
"scratch-audio": "0.1.0-prerelease.20200528195344",
"scratch-blocks": "0.1.0-prerelease.20220329103322",
"scratch-l10n": "3.14.20220426031558",
"scratch-paint": "0.2.0-prerelease.20220426120240",
"scratch-blocks": "0.1.0-prerelease.20220501111245",
"scratch-l10n": "3.14.20220504031551",
"scratch-paint": "0.2.0-prerelease.20220429193038",
"scratch-render": "0.1.0-prerelease.20211028200436",
"scratch-render-fonts": "1.0.0-prerelease.20210401210003",
"scratch-storage": "1.3.5",
"scratch-svg-renderer": "0.2.0-prerelease.20210727023023",
"scratch-vm": "0.2.0-prerelease.20220426104209",
"scratch-vm": "0.2.0-prerelease.20220501145413",
"startaudiocontext": "1.2.1",
"style-loader": "^0.23.0",
"text-encoding": "0.7.0",
@ -51080,22 +51064,10 @@
"symbol-observable": "^1.0.3"
}
},
"scratch-l10n": {
"version": "3.14.20220426031558",
"resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.14.20220426031558.tgz",
"integrity": "sha512-SgQ4Zd4LX9rTYvRpRhJitV7I0BIJFLBAyISogpDZNKIA7OAx3Fr5FvUofarUumZxoTmSdjzqDezZJpP4/u7+7w==",
"dev": true,
"requires": {
"@babel/cli": "^7.1.2",
"@babel/core": "^7.1.2",
"babel-plugin-react-intl": "^3.0.1",
"transifex": "1.6.6"
}
},
"scratch-paint": {
"version": "0.2.0-prerelease.20220426120240",
"resolved": "https://registry.npmjs.org/scratch-paint/-/scratch-paint-0.2.0-prerelease.20220426120240.tgz",
"integrity": "sha512-0hxmE9qHg+8Kka3Dc29Jml2PbUjrji0bS4sYXkh2JRMO1IZVUyWLcr9ju+rvu4DjiZee2X0bVTUGeGc73qSpHw==",
"version": "0.2.0-prerelease.20220429193038",
"resolved": "https://registry.npmjs.org/scratch-paint/-/scratch-paint-0.2.0-prerelease.20220429193038.tgz",
"integrity": "sha512-1jCa4ieYjMOc/nKrOlcGCG0DtseR+YAapIYHlraUO6DGHTBm2frB//CDkEHwOIlN54ZPOak2WS4oJYKDuFgqEQ==",
"dev": true,
"requires": {
"@scratch/paper": "0.11.20200728195508",
@ -51176,9 +51148,9 @@
}
},
"scratch-l10n": {
"version": "3.14.20220427031558",
"resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.14.20220427031558.tgz",
"integrity": "sha512-0qdms1YJ4cZyHVpdLhfDU4c2VGbPWtGDCm+pfFUCkP3dpkFLn20iJwzIlNTzznVXMqa4WsC/qDfaMyLtGNcEtw==",
"version": "3.14.20220504031551",
"resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.14.20220504031551.tgz",
"integrity": "sha512-X65xULMmmUrSrKf+dEplskLg+HcFQWc6hzAJN7x8/j5O252v5z7SKrJbLhH1lzmtHyGfeLgiy6aHOfzt1TmCnA==",
"dev": true,
"requires": {
"@babel/cli": "^7.1.2",
@ -51368,9 +51340,9 @@
"dev": true
},
"scratch-vm": {
"version": "0.2.0-prerelease.20220426104209",
"resolved": "https://registry.npmjs.org/scratch-vm/-/scratch-vm-0.2.0-prerelease.20220426104209.tgz",
"integrity": "sha512-8k1EHPStDNWDMm459z+FmBE3P17Qfivdo4ThHtMPJysWCBLLG65DPl4fQ4+Wl9AgP/XHhO1nwTdZiNkVHxetCQ==",
"version": "0.2.0-prerelease.20220501145413",
"resolved": "https://registry.npmjs.org/scratch-vm/-/scratch-vm-0.2.0-prerelease.20220501145413.tgz",
"integrity": "sha512-M6uETr2H3mnroeTAdO23TsQSg25yLXjmCzARj6Nrj4uZLHgxEmOx94kJItjdfYZ/N/+koGELSj9xzvL2gxalxA==",
"dev": true,
"requires": {
"@vernier/godirect": "1.5.0",

4
package.json
View file

@ -134,8 +134,8 @@
"regenerator-runtime": "0.13.9",
"sass": "1.49.7",
"sass-loader": "10.2.1",
"scratch-gui": "0.1.0-prerelease.20220426200048",
"scratch-l10n": "3.14.20220427031558",
"scratch-gui": "0.1.0-prerelease.20220504060134",
"scratch-l10n": "3.14.20220504031551",
"selenium-webdriver": "4.1.0",
"slick-carousel": "1.6.0",
"style-loader": "0.12.3",

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

6
src/components/timeline-card/timeline-card.scss
View file

@ -4,6 +4,7 @@ $timeline-breakpoint: "only screen and (max-width : 1030px)";
.timeline-card{
max-width: 460px;
z-index: 2;
@media #{$small} {
max-width: 300px;
@ -12,7 +13,6 @@ $timeline-breakpoint: "only screen and (max-width : 1030px)";
background-color: $ui-white;
border-radius: 8px;
position: relative;
z-index: 1;
margin-bottom: 30px;
.timeline-content {
@ -24,8 +24,8 @@ $timeline-breakpoint: "only screen and (max-width : 1030px)";
}
a{
position: absolute;
right: 15px;
top: 15px;
right: 12px;
top: 1px;
}
img{

1
src/routes.json
View file

@ -12,6 +12,7 @@
"routeAlias": "/annual-report/?$",
"view": "annual-report/2020/annual-report",
"title": "Annual Report 2020",
"intlName": "annual-report-2020",
"viewportWidth": "device-width"
},
{

2
src/template.ejs
View file

@ -79,7 +79,7 @@
<script src="<%= htmlWebpackPlugin.files.chunks.common.entry %>"></script>
<!-- Scripts -->
<script src="/js/<%= htmlWebpackPlugin.options.route.name %>.intl.js"></script>
<script src="/js/<%= htmlWebpackPlugin.options.route.intlName || htmlWebpackPlugin.options.route.name %>.intl.js"></script>
<script src="<%= htmlWebpackPlugin.files.chunks[htmlWebpackPlugin.options.route.name].entry %>"></script>
<!-- Translate title element -->

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

@ -17,7 +17,9 @@ 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');
import {TwitterTweetEmbed} from 'react-twitter-embed';
const Organizations = require('./orgs.json');
@ -70,21 +72,22 @@ const COUNTRIES2 = [
];
const CountryOrgList = props => (
<ul className="org-list">
<ul className="org-list-ul">
{/* eslint-disable */}
{/* circle back to this */}
{Organizations.filter(org => org.country === props.country).map((org, i) => {
return <li className="organization" key={i}>{org.name}</li>;
})}
{/* eslint-enable */}
</ul>
)
);
const CreateOrgList = props => (
<div className="org-list">
{/* eslint-disable */}
{props.array.map((country, i) => {
return <div className="country-org-list"><h5 key={i}>{country}</h5><CountryOrgList country={country} /></div>;
return <div className="country-org-list" key={i}><h5>{country}</h5><CountryOrgList country={country} /></div>;
})}
{/* eslint-enable */}
</div>
);
@ -355,14 +358,8 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.2021.mastheadTitle" />
</h1>
</div>
{/* <img
src="/images/annual-report/2021/Masthead Illustration.svg"
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altMastheadIllustration'}
)}
/> */}
<img
src="/images/annual-report/2021/Masthead_Illo_screenshot.png"
src="/images/annual-report/2021/Masthead Illustration.svg"
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altMastheadIllustration'}
)}
@ -457,6 +454,7 @@ class AnnualReport extends React.Component {
</p>
</div>
<div className="four-up">
{/* eslint-disable max-len */}
<div className="one-p four-up-creative-expression">
<div className="four-up-title creative-expression">
<h3>
@ -483,6 +481,7 @@ class AnnualReport extends React.Component {
</div>
<p className="inner"><FormattedMessage id="annualReport.2021.playfulEngagementDescription" /></p>
</div>
{/* eslint-enable max-len */}
</div>
</div>
<div
@ -520,9 +519,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
@ -538,9 +541,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
@ -556,9 +563,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">
@ -576,7 +587,9 @@ class AnnualReport extends React.Component {
values={{
numberOfCountries: (
<b>
{/* eslint-disable max-len */}
<FormattedMessage id="annualReport.2021.reachScratchAroundTheWorldBold" />
{/* eslint-enable max-len */}
</b>
)
}}
@ -682,18 +695,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}>
@ -752,8 +760,6 @@ class AnnualReport extends React.Component {
</div>
</div>
<div className="initiatives-subsection-content SEC">
{/* eslint-disable max-len */}
{/* <div className="inner"> */}
<div className="content two-up">
<div className="p-content">
<h4>
@ -833,9 +839,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>
@ -850,12 +860,14 @@ class AnnualReport extends React.Component {
</p>
</div>
<div className="images">
{/* eslint-disable max-len */}
<img
src="/images/annual-report/2021/1_SEC Section/Bridges to Science.svg"
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altSECSpotlightImage'}
)}
/>
{/* eslint-enable max-len */}
</div>
</div>
</MediaQuery>
@ -865,9 +877,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>
@ -876,12 +892,14 @@ class AnnualReport extends React.Component {
</p>
</div>
<div className="images">
{/* eslint-disable max-len */}
<img
src="/images/annual-report/2021/1_SEC Section/Bridges to Science.svg"
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altSECSpotlightImage'}
)}
/>
{/* eslint-enable max-len */}
</div>
<div className="text">
<p>
@ -914,7 +932,13 @@ class AnnualReport extends React.Component {
<h4 className="center">
<FormattedMessage id="annualReport.2021.SECWorkshopsSubtitle" />
</h4>
<p>placeholder</p>
<img
className="sec-image"
src="/images/annual-report/2021/1_SEC Section/Workshops.svg"
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altSECWorkshops'}
)}
/>
</div>
</div>
</div>
@ -932,13 +956,17 @@ 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>
<p class="subhed">
<p className="subhed">
<FormattedMessage
id="annualReport.2021.accessASLText"
/>
@ -950,6 +978,7 @@ class AnnualReport extends React.Component {
{id: 'annualReport.2021.altAccessibility'}
)}
/>
{/* eslint-enable */}
<p>
<FormattedMessage
id="annualReport.2021.accessASLText2"
@ -970,6 +999,7 @@ class AnnualReport extends React.Component {
</p>
<div className="video-container SEC">
<div className="video-background SEC">
{/* eslint-disable max-len */}
<MediaQuery minWidth={frameless.tabletPortrait}>
<VideoPreview
buttonMessage={
@ -978,7 +1008,7 @@ class AnnualReport extends React.Component {
thumbnail="/images/annual-report/2021/2_Access Section/Deaf Kids Code Video.png"
videoId="i2g46ikddf"
thumbnailWidth="580"
videoHeight={580 * .568}
videoHeight={String(580 * .568)}
videoWidth="580"
alt={
this.props.intl.formatMessage(
@ -998,7 +1028,7 @@ class AnnualReport extends React.Component {
thumbnail="/images/annual-report/2021/2_Access Section/Deaf Kids Code Video.png"
videoId="i2g46ikddf"
thumbnailWidth="400"
videoHeight={400 * .568}
videoHeight={String(400 * .568)}
videoWidth="400"
alt={
this.props.intl.formatMessage(
@ -1015,7 +1045,7 @@ class AnnualReport extends React.Component {
thumbnail="/images/annual-report/2021/2_Access Section/Deaf Kids Code Video.png"
videoId="i2g46ikddf"
thumbnailWidth="300"
videoHeight={300 * .568}
videoHeight={String(300 * .568)}
videoWidth="300"
alt={
this.props.intl.formatMessage(
@ -1024,6 +1054,7 @@ class AnnualReport extends React.Component {
}
/>
</MediaQuery>
{/* eslint-enable max-len */}
</div>
</div>
</div>
@ -1047,6 +1078,7 @@ class AnnualReport extends React.Component {
id="annualReport.2021.accessDEICommitteeText"
/>
</TextAndMediaSnippet>
{/* eslint-enable */}
</MediaQuery>
<MediaQuery maxWidth={frameless.tabletPortrait - 1}>
{/* eslint-disable max-len */}
@ -1067,6 +1099,7 @@ class AnnualReport extends React.Component {
id="annualReport.2021.accessDEICommitteeText"
/>
</TextAndMediaSnippet>
{/* eslint-enable */}
</MediaQuery>
</div>
</div>
@ -1094,6 +1127,7 @@ class AnnualReport extends React.Component {
id="annualReport.2021.accessDEICommitteeAccessibilityText2"
/>
</TextAndMediaSnippet>
{/* eslint-enable */}
</MediaQuery>
<MediaQuery maxWidth={frameless.tabletPortrait - 1}>
{/* eslint-disable max-len */}
@ -1115,6 +1149,7 @@ class AnnualReport extends React.Component {
id="annualReport.2021.accessDEICommitteeAccessibilityText2"
/>
</TextAndMediaSnippet>
{/* eslint-enable */}
</MediaQuery>
</div>
</div>
@ -1142,6 +1177,7 @@ class AnnualReport extends React.Component {
id="annualReport.2021.accessDEICommitteeG-JEDIText2"
/>
</TextAndMediaSnippet>
{/* eslint-enable */}
</MediaQuery>
<MediaQuery maxWidth={frameless.tabletPortrait - 1}>
{/* eslint-disable max-len */}
@ -1163,6 +1199,7 @@ class AnnualReport extends React.Component {
id="annualReport.2021.accessDEICommitteeG-JEDIText2"
/>
</TextAndMediaSnippet>
{/* eslint-enable */}
</MediaQuery>
</div>
</div>
@ -1212,16 +1249,20 @@ class AnnualReport extends React.Component {
id="annualReport.2021.accessDEICommitteeEquityXDesignText2"
/>
</TextAndMediaSnippet>
{/* eslint-enable */}
</MediaQuery>
</div>
</div>
</div>
{/* 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">
@ -1239,7 +1280,6 @@ class AnnualReport extends React.Component {
>
<iframe
src="https://scratch.mit.edu/projects/430997530/embed"
allowTransparency="true"
width="360"
height={((360 * .76) + 45)}
frameBorder="0"
@ -1250,7 +1290,6 @@ class AnnualReport extends React.Component {
<MediaQuery maxWidth={frameless.desktop - 1}>
<iframe
src="https://scratch.mit.edu/projects/430997530/embed"
allowTransparency="true"
width="300"
height={((300 * .76) + 45)}
frameBorder="0"
@ -1281,6 +1320,7 @@ class AnnualReport extends React.Component {
id="annualReport.2021.accessSouthAfricaText"
/>
</TextAndMediaSnippet>
{/* eslint-enable */}
</MediaQuery>
<MediaQuery maxWidth={frameless.tabletPortrait - 1}>
{/* eslint-disable max-len */}
@ -1299,6 +1339,7 @@ class AnnualReport extends React.Component {
id="annualReport.2021.accessSouthAfricaText"
/>
</TextAndMediaSnippet>
{/* eslint-enable */}
</MediaQuery>
</div>
</div>
@ -1317,14 +1358,20 @@ 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"
/>
{/* eslint-disable max-len */}
<h4>
<FormattedMessage id="annualReport.2021.communityScratchConference" />
</h4>
<p>
<FormattedMessage id="annualReport.2021.communityScratchConferenceText1"
<FormattedMessage
id="annualReport.2021.communityScratchConferenceText1"
values={{
more_bold: (
<b>
@ -1332,8 +1379,9 @@ class AnnualReport extends React.Component {
</b>
)
}}
/>
/>
</p>
{/* eslint-enable max-len */}
</div>
<div className="tweet-container">
<div className="tweets">
@ -1358,9 +1406,6 @@ class AnnualReport extends React.Component {
{/* eslint-disable max-len */}
<TextAndMediaSnippet
className="regular"
// title={this.props.intl.formatMessage(
// {id: 'annualReport.2021.communityVolunteerTranslators'}
// )}
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altcommunityVolunteerTranslators'}
)}
@ -1371,14 +1416,12 @@ class AnnualReport extends React.Component {
id="annualReport.2021.communityVolunteerTranslatorsText"
/>
</TextAndMediaSnippet>
{/* eslint-enable */}
</MediaQuery>
<MediaQuery maxWidth={frameless.desktop - 1}>
{/* eslint-disable max-len */}
<TextAndMediaSnippet
className="regular"
// title={this.props.intl.formatMessage(
// {id: 'annualReport.2021.communityVolunteerTranslators'}
// )}
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altcommunityVolunteerTranslators'}
)}
@ -1389,18 +1432,21 @@ class AnnualReport extends React.Component {
id="annualReport.2021.communityVolunteerTranslatorsText"
/>
</TextAndMediaSnippet>
{/* eslint-enable */}
</MediaQuery>
<p>
<p className="contain-p">
<FormattedMessage
id="annualReport.2021.communityVolunteerTranslatorsText2"
/>
</p>
</div>
<div className="thank-you-image">
{/* eslint-disable max-len */}
<img
src="/images/annual-report/2021/3_Community Section/Thank You Translators.svg"
alt={this.props.intl.formatMessage({id: 'annualReport.2021.altcommunityThankYou'})}
/>
{/* eslint-enable max-len */}
</div>
</div>
@ -1412,17 +1458,26 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.2021.communityScratchCommunityIntro" />
</p>
</div>
<div className="inner">
</div>
{/* go into timeline section */}
<div className="year-in-review">
<div className="sparkles">
<img
className="upper-wave"
src="/images/annual-report/2021/3_Community Section/Timeline/Timeline Background (Base).svg"
alt={this.props.intl.formatMessage({id: 'annualReport.2021.altWaveBottom'})}
className="sparkle-left"
src="/images/annual-report/2021/3_Community Section/Timeline/Left Sparkles.svg"
alt={this.props.intl.formatMessage({id: 'annualReport.2021.altSparkle'})}
/>
<img
className="down-arrow"
src="/images/annual-report/2021/3_Community Section/Timeline/Down Arrow.svg"
alt={this.props.intl.formatMessage({id: 'annualReport.2021.altDownArrow'})}
/>
<img
className="sparkle-right"
src="/images/annual-report/2021/3_Community Section/Timeline/Right Sparkles.svg"
alt={this.props.intl.formatMessage({id: 'annualReport.2021.altSparkle'})}
/>
</div>
<div className="year-in-review">
<TimelineCard
className="center"
link="https://scratch.mit.edu/studios/28659922/"
@ -1442,13 +1497,14 @@ class AnnualReport extends React.Component {
projectBy={this.props.intl.formatMessage(
{id: 'annualReport.2021.projectBy'}
)}
attribution="u/KAKE93"
attribution="@KAKE93"
/>
<img
className="connector left"
src="/images/annual-report/2021/3_Community Section/Timeline/jan to feb.svg"
alt={this.props.intl.formatMessage({id: 'annualReport.2021.altConnectingLine'})}
/>
{/* eslint-disable max-len */}
<TimelineCard
className="left"
link="https://scratch.mit.edu/studios/28738118/"
@ -1468,11 +1524,10 @@ class AnnualReport extends React.Component {
projectBy={this.props.intl.formatMessage(
{id: 'annualReport.2021.projectBy'}
)}
attribution="u/debabeth"
attribution="@debabeth"
/>
<TimelineCard
className="left"
// link="https://www.youtube.com/watch?v=uR5C173yrJs"
date={this.props.intl.formatMessage(
{id: 'annualReport.2021.yearInReviewCard3Date'}
)}
@ -1489,7 +1544,7 @@ class AnnualReport extends React.Component {
projectBy={this.props.intl.formatMessage(
{id: 'annualReport.2021.projectBy'}
)}
attribution="u/Animator_Aryu"
attribution="@Animator_Aryu"
/>
<img
className="connector"
@ -1498,7 +1553,6 @@ class AnnualReport extends React.Component {
/>
<TimelineCard
className="right"
// link="https://scratch.mit.edu/projects/400944766/"
date={this.props.intl.formatMessage(
{id: 'annualReport.2021.yearInReviewCard4Date'}
)}
@ -1528,7 +1582,7 @@ class AnnualReport extends React.Component {
projectBy={this.props.intl.formatMessage(
{id: 'annualReport.2021.projectBy'}
)}
attribution="u/ratchild"
attribution="@ratchild"
/>
<img
className="connector"
@ -1554,7 +1608,7 @@ class AnnualReport extends React.Component {
projectBy={this.props.intl.formatMessage(
{id: 'annualReport.2021.projectBy'}
)}
attribution="u/Cupwing"
attribution="@Cupwing"
/>
<TimelineCard
className="left"
@ -1575,10 +1629,10 @@ class AnnualReport extends React.Component {
projectBy={this.props.intl.formatMessage(
{id: 'annualReport.2021.projectBy'}
)}
attribution="u/twingamerdudesreal"
attribution="@twingamerdudesreal"
/>
<img
className="connector"
className="connector left"
src="/images/annual-report/2021/3_Community Section/Timeline/oct to dec.svg"
alt={this.props.intl.formatMessage({id: 'annualReport.2021.altConnectingLine'})}
/>
@ -1594,9 +1648,6 @@ class AnnualReport extends React.Component {
text={this.props.intl.formatMessage(
{id: 'annualReport.2021.yearInReviewCard8Text'}
)}
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altCard8'}
)}
/>
<TimelineCard
className="center"
@ -1613,11 +1664,11 @@ class AnnualReport extends React.Component {
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altCard9'}
)}
image="/images/annual-report/2021/3_Community Section/Timeline/Scratchtober.png"
image="/images/annual-report/2021/3_Community Section/Timeline/Year in Review.png"
projectBy={this.props.intl.formatMessage(
{id: 'annualReport.2021.projectBy'}
)}
attribution="u/12_468"
attribution="@12_468"
/>
<div className="illustrations">
<img
@ -1630,92 +1681,122 @@ class AnnualReport extends React.Component {
src="/images/annual-report/2021/3_Community Section/Timeline/June Illustration.svg"
alt={this.props.intl.formatMessage({id: 'annualReport.2021.altMay'})}
/>
<p className="may">
<FormattedMessage id="annualReport.2021.JuneIlloAttr" />
</p>
<img
className="june"
src="/images/annual-report/2021/3_Community Section/Timeline/Oct Illustration.svg"
alt={this.props.intl.formatMessage({id: 'annualReport.2021.altJune'})}
/>
<p className="june">
<FormattedMessage id="annualReport.2021.OctIlloAttr" />
</p>
</div>
{/* eslint-enable max-len */}
</div>
<div className="initiatives-subsection-content">
<div className="initiatives-subsection-content lab">
<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>
<p>
<FormattedMessage id="annualReport.2021.communityScratchLabText" />
</p>
<MediaQuery
minWidth={frameless.tabletPortrait}
>
<p>
<FormattedMessage id="annualReport.2021.communityScratchLabText" />
</p>
</MediaQuery>
</div>
{/* eslint-disable max-len */}
<div className="images">
<img
src="/images/annual-report/2021/3_Community Section/Scratch Lab logo.png"
alt={this.props.intl.formatMessage({id: 'annualReport.2021.altScratchLogoText'})}
/>
</div>
{/* eslint-enable max-len */}
<MediaQuery
maxWidth={frameless.tabletPortrait - 1}
>
<p>
<FormattedMessage id="annualReport.2021.communityScratchLabText" />
</p>
</MediaQuery>
</div>
<p>
<FormattedMessage id="annualReport.2021.communityScratchLabText2" />
</p>
<MediaQuery minWidth={frameless.tabletPortrait}>
<VideoPreview
buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'})
}
thumbnail="/images/annual-report/2021/3_Community Section/Scratch Lab video.png"
videoId="go1wqxifjk"
thumbnailWidth="580"
videoHeight={580 * .568}
videoWidth="580"
alt={
this.props.intl.formatMessage(
{id: 'annualReport.2021.altScratchLabVideo'}
)
}
/>
</MediaQuery>
<MediaQuery
maxWidth={frameless.tabletPortrait - 1}
minWidth={frameless.mobile}
>
<VideoPreview
buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'})
}
thumbnail="/images/annual-report/2021/3_Community Section/Scratch Lab video.png"
videoId="go1wqxifjk"
thumbnailWidth="400"
videoHeight={400 * .568}
videoWidth="400"
alt={
this.props.intl.formatMessage(
{id: 'annualReport.2021.altScratchLabVideo'}
)
}
/>
</MediaQuery>
<MediaQuery maxWidth={frameless.mobile - 1}>
<VideoPreview
buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'})
}
thumbnail="/images/annual-report/2021/3_Community Section/Scratch Lab video.png"
videoId="go1wqxifjk"
thumbnailWidth="300"
videoHeight={300 * .568}
videoWidth="300"
alt={
this.props.intl.formatMessage(
{id: 'annualReport.2021.altScratchLabVideo'}
)
}
/>
</MediaQuery>
</div>
</div>
<div className="aaa-video">
<MediaQuery minWidth={frameless.tabletPortrait}>
<VideoPreview
buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'})
}
thumbnail="/images/annual-report/2021/3_Community Section/Scratch Lab video.png"
videoId="go1wqxifjk"
thumbnailWidth="580"
videoHeight={String(580 * .568)}
videoWidth="580"
alt={
this.props.intl.formatMessage(
{id: 'annualReport.2021.altScratchLabVideo'}
)
}
/>
</MediaQuery>
<MediaQuery
maxWidth={frameless.tabletPortrait - 1}
minWidth={frameless.mobile}
>
<VideoPreview
buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'})
}
thumbnail="/images/annual-report/2021/3_Community Section/Scratch Lab video.png"
videoId="go1wqxifjk"
thumbnailWidth="400"
videoHeight={String(400 * .568)}
videoWidth="400"
alt={
this.props.intl.formatMessage(
{id: 'annualReport.2021.altScratchLabVideo'}
)
}
/>
</MediaQuery>
<MediaQuery maxWidth={frameless.mobile - 1}>
<VideoPreview
buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'})
}
thumbnail="/images/annual-report/2021/3_Community Section/Scratch Lab video.png"
videoId="go1wqxifjk"
thumbnailWidth="300"
videoHeight={String(300 * .568)}
videoWidth="300"
alt={
this.props.intl.formatMessage(
{id: 'annualReport.2021.altScratchLabVideo'}
)
}
/>
</MediaQuery>
</div>
<div className="initiatives-subsection-content lab second">
<div className="wide inner community">
<div className="community-sds">
<p>
<FormattedMessage id="annualReport.2021.communityScratchLabText3" />
@ -1724,6 +1805,7 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.2021.communityScratchLabText4" />
</p>
<div className="sds-list">
{/* eslint-disable max-len */}
<div className="sds-tile">
<img
src="/images/annual-report/2021/3_Community Section/Scratch Lab hat.png"
@ -1742,37 +1824,76 @@ class AnnualReport extends React.Component {
alt={this.props.intl.formatMessage({id: 'annualReport.2021.altStar'})}
/>
</div>
{/* eslint-enable max-len */}
</div>
</div>
<div className="world">
<h4>
<div style={{width: '100%'}}>
<h4 style={{textAlign: 'center'}}>
<FormattedMessage id="annualReport.2021.communitySnapshot2Title" />
</h4>
<div className="content two-wide split">
<div className="text">
<p>
<FormattedMessage id="annualReport.2021.communitySnapshot2Text" />
</p>
</div>
<div className="images">
<img
src="/images/annual-report/2021/3_Community Section/YT data splash.svg"
alt={this.props.intl.formatMessage({id: 'annualReport.2021.altScratchLogoText'})}
/>
<div className="content two-wide split yt">
<MediaQuery
minWidth={frameless.tabletPortrait}
>
<div className="text">
<p>
{/* eslint-disable max-len */}
<FormattedMessage id="annualReport.2021.communitySnapshot2Text" />
{/* eslint-enable max-len */}
</p>
</div>
</MediaQuery>
<div className="images yt-splash">
<div className="num-block one">
<div className="num">
<FormattedMessage id="annualReport.2021.ytData1" />
</div>
<div className="small-text">
<FormattedMessage id="annualReport.2021.ytData1Sub" />
</div>
</div>
<div className="num-block two">
<div className="num">
<FormattedMessage id="annualReport.2021.ytData2" />
</div>
<div className="small-text">
<FormattedMessage id="annualReport.2021.ytData2Sub" />
</div>
</div>
<div className="num-block three">
<div className="small-text">
<FormattedMessage id="annualReport.2021.ytData3Top" />
</div>
<div className="num">
<FormattedMessage id="annualReport.2021.ytData3" />
</div>
<div className="small-text">
<FormattedMessage id="annualReport.2021.ytData3Sub" />
</div>
</div>
</div>
<MediaQuery
maxWidth={frameless.tabletPortrait - 1}
>
<div className="text">
<p>
{/* eslint-disable max-len */}
<FormattedMessage id="annualReport.2021.communitySnapshot2Text" />
{/* eslint-enable max-len */}
</p>
</div>
</MediaQuery>
</div>
{/* <p>
<FormattedMessage id="annualReport.2021.communitySnapshot2Text" />
</p> */}
{/* eslint-disable max-len */}
<MediaQuery minWidth={frameless.tabletPortrait}>
<VideoPreview
<VideoPreviewYouTube
buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'})
}
thumbnail="/images/annual-report/2021/3_Community Section/YT video spotlight video.png"
videoId="https://www.youtube.com/watch?v=uv8mbL-MC58&t=116s"
videoId="uv8mbL-MC58"
thumbnailWidth="580"
videoHeight={580 * .568}
videoHeight={String(580 * .568)}
videoWidth="580"
alt={
this.props.intl.formatMessage(
@ -1785,14 +1906,14 @@ class AnnualReport extends React.Component {
maxWidth={frameless.tabletPortrait - 1}
minWidth={frameless.mobile}
>
<VideoPreview
<VideoPreviewYouTube
buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'})
}
thumbnail="/images/annual-report/2021/3_Community Section/YT video spotlight video.png"
videoId="https://www.youtube.com/watch?v=uv8mbL-MC58&t=116s"
videoId="uv8mbL-MC58"
thumbnailWidth="400"
videoHeight={400 * .568}
videoHeight={String(400 * .568)}
videoWidth="400"
alt={
this.props.intl.formatMessage(
@ -1802,14 +1923,14 @@ class AnnualReport extends React.Component {
/>
</MediaQuery>
<MediaQuery maxWidth={frameless.mobile - 1}>
<VideoPreview
<VideoPreviewYouTube
buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'})
}
thumbnail="/images/annual-report/2021/3_Community Section/YT video spotlight video.png"
videoId="https://www.youtube.com/watch?v=uv8mbL-MC58&t=116s"
videoId="uv8mbL-MC58"
thumbnailWidth="300"
videoHeight={300 * .568}
videoHeight={String(300 * .568)}
videoWidth="300"
alt={
this.props.intl.formatMessage(
@ -1818,15 +1939,17 @@ class AnnualReport extends React.Component {
}
/>
</MediaQuery>
{/* eslint-enable max-len */}
</div>
<div className="community-sds">
<p>
<FormattedMessage id="annualReport.2021.communitySnapshot2Text2" />
</p>
<div className="sds-list">
{/* eslint-disable max-len */}
<div className="sds-tile">
<a
href="https://www.youtube.com/watch?v=zM9MYI6bVMk&t=114s"
href="https://www.youtube.com/watch?v=zM9MYI6bVMk"
target="_blank"
rel="noopener noreferrer"
>
@ -1839,7 +1962,7 @@ class AnnualReport extends React.Component {
</div>
<div className="sds-tile">
<a
href="https://www.youtube.com/watch?v=4v1CIKehF6E&t=3s"
href="https://www.youtube.com/watch?v=4v1CIKehF6E"
target="_blank"
rel="noopener noreferrer"
>
@ -1852,7 +1975,7 @@ class AnnualReport extends React.Component {
</div>
<div className="sds-tile">
<a
href="https://www.youtube.com/watch?v=TZu2QwkYQm0&t=114s"
href="https://www.youtube.com/watch?v=TZu2QwkYQm0"
target="_blank"
rel="noopener noreferrer"
>
@ -1863,13 +1986,13 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.2021.tutorial3" />
</a>
</div>
{/* eslint-enable max-len */}
</div>
</div>
</div>
</div>
</div>
{/* eslint-enable max-len */}
</div>
<div
@ -2054,7 +2177,7 @@ class AnnualReport extends React.Component {
<h2>
<FormattedMessage id="annualReport.2021.leadershipTitle" />
</h2>
<h3>
<h3 style={{margin: '0 25px'}}>
<FormattedMessage id="annualReport.2021.leadershipBoard" />
</h3>
<FlexRow className="leadership-board">

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

@ -10,7 +10,10 @@ $masthead-breakpoint-wave: "only screen and (max-width : 1060px)";
$timeline-breakpoint: "only screen and (max-width : 1030px)";
$ui-purple-dark: hsla(260, 55%, 55%, 1);
// $motion-blue-3 #3373CC
body{
background-color: $annual-report-aqua;
}
.access .button{
background-color: $annual-report-green;
@ -23,6 +26,7 @@ $ui-purple-dark: hsla(260, 55%, 55%, 1);
background-color: $ui-white;
padding: 0;
width: 100%;
overflow: hidden;
}
h1 {
@ -31,8 +35,6 @@ h1 {
}
h2 {
// font-size: 3.25rem;
// line-height: 3.75rem;
font-size: 2.9rem;
line-height: 3.2rem;
}
@ -47,7 +49,7 @@ h4 {
line-height: 2rem;
&.special{
margin: 50px auto -50px;
@media #{$medium-and-smaller}{
@media #{$intermediate-and-smaller}{
margin: 50px auto 30px;
}
}
@ -105,7 +107,7 @@ a, a:link, a:visited, a:active{
}
.message-section {
background-color: $annual-report-green;
background-color: $annual-report-aqua;
h1, h2, p {
color: $ui-white;
@ -283,7 +285,7 @@ a, a:link, a:visited, a:active{
font-size: 1.45rem;
line-height: 2rem;
text-align: left;
margin-bottom: 10px;
margin-bottom: 40px;
@media #{$small}{
font-size: 24px;
}
@ -306,6 +308,12 @@ a, a:link, a:visited, a:active{
margin-bottom: -75px;
background-image: url("/images/annual-report/2021/1_SEC Section/quote (blue).svg");
}
@media #{$medium-and-smaller}{
max-width: 460px;
width: 100%;
margin-bottom: 15px;
}
}
&.green{
font-weight: 500;
@ -315,6 +323,9 @@ a, a:link, a:visited, a:active{
margin-bottom: -75px;
background-image: url("/images/annual-report/2021/2_Access Section/quote (green).svg");
}
@media #{$medium-and-smaller}{
margin-bottom: 15px;
}
}
}
@ -334,6 +345,12 @@ a, a:link, a:visited, a:active{
p{
text-align: left;
}
.sec-image{
width: 100%;
max-width: 700px;
margin: 30px auto 0;
display: block;
}
}
.pull-quote-attr{
@ -346,6 +363,12 @@ a, a:link, a:visited, a:active{
&.right{
text-align: right;
margin-bottom: 30px;
@media #{$medium-and-smaller}{
margin-bottom: 40px;
}
}
@media #{$medium-and-smaller}{
margin-bottom: 40px;
}
}
@ -379,24 +402,20 @@ a, a:link, a:visited, a:active{
.four-up {
margin: 56px 0 124px 0;
max-width: 940px;
max-width: 620px;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
justify-content: space-between;
@media #{$intermediate} {
margin-top: 96px 0 108px 0;
}
// @media #{$intermediate-and-smaller} {
// justify-content: center;
// }
@media #{$medium-and-smaller} {
margin-top: 76px;
margin-top: 10px;
align-items: center;
}
}
@ -414,9 +433,8 @@ a, a:link, a:visited, a:active{
}
.one-p {
width: 300px;
width: 290px;
height: 493px;
margin-right: 20px;
&.top {
margin-top: 0px;
}
@ -440,9 +458,12 @@ a, a:link, a:visited, a:active{
justify-content: flex-start;
width: 100%;
height: initial;
margin-top: 30px;
img {
width: 300px;
width: 290px;
}
.inner{
padding-top: 15px;
}
}
@ -456,7 +477,7 @@ a, a:link, a:visited, a:active{
}
.four-up-title {
width: 300px;
width: 290px;
margin: 16px auto 0 auto;
background-repeat: no-repeat;
background-size: contain;
@ -596,7 +617,7 @@ a, a:link, a:visited, a:active{
}
}
background-color: $annual-report-green;
background-color: $annual-report-aqua;
color: $ui-white;
h2, h3, h4, p {
@ -610,7 +631,7 @@ a, a:link, a:visited, a:active{
.reach-intro {
max-width: 900px;
text-align: center;
width: 100%;
.hed{
max-width: 630px;
margin: auto;
@ -699,90 +720,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;
}
margin: 50px 0 20px 0;
@media #{$medium-and-smaller}{
margin: 50px auto 20px auto;
}
}
&.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;
}
}
@ -804,9 +749,15 @@ a, a:link, a:visited, a:active{
width: calc(100% - 30px);
text-align: left;
}
@media #{$small}{
flex-direction: column;
}
.org-list{
width: 98%;
width: 48%;
text-align: left;
@media #{$small}{
width: 100%;
}
}
h5{
margin-bottom: -4px;
@ -951,7 +902,7 @@ img.comment-viz{
}
.reach-scratch-jr {
background-color: $annual-report-green;
background-color: $annual-report-aqua;
color: $ui-white;
padding: 100px 0;
@ -1146,9 +1097,8 @@ img.comment-viz{
.initiatives-subsection-header {
background-image: url("/images/annual-report/2020/Juice-Pattern.svg");
padding: 92px 0;
padding: 92px 25px;
&.SEC {
background-color: $motion-blue-3;
background-position: 50% 100%;
@ -1203,6 +1153,28 @@ img.comment-viz{
line-height: 2rem;
}
&.lab{
@media #{$small}{
width: calc(100% - 50px);
margin: auto;
.images{
margin: auto;
}
}
&.second{
@media #{$intermediate} {
.inner .two-wide .text{
max-width: 260px;
}
}
@media #{$medium-and-smaller} {
.inner .two-wide .text{
max-width: 100%;
}
}
}
}
.content{
display: flex;
flex-direction: row;
@ -1332,7 +1304,10 @@ img.comment-viz{
margin: 30px auto 50px;
}
img{
width: 100%;
width: 90%;
max-width: 780px;
margin: auto;
display: block;
}
}
.bubble{
@ -1432,6 +1407,14 @@ img.comment-viz{
&.stacked{
margin-top: 0px;
padding-top: 0px;
@media #{$medium-and-smaller}{
max-width: 460px;
width: 100%;
}
@media #{$small}{
max-width: calc(100% - 50px);
width: 100%;
}
}
@media #{$big} {
max-width: 840px;
@ -1451,25 +1434,102 @@ img.comment-viz{
}
@media #{$small} {
max-width: 300px;
max-width: calc(100% - 50px);
margin: auto;
padding-top: 32px;
}
.two-wide{
margin: 50px auto 0px;
max-width: 840px;
.bubble{
margin: -25px 0 40px;
}
justify-content: space-between;
@media #{$medium-and-smaller}{
.bubble{
margin: -25px auto 30px;
}
h4{
margin-bottom: 20px;
}
p{
}
+ p {
text-align: left;
}
}
.text{
max-width: 480px;
width: 100%;
@media #{$intermediate}{
max-width: 230px;
text-align: left;
}
}
&.yt{
margin-top: 10px;
p{
text-align: left;
}
+ .video-preview{
margin: 30px auto;
}
}
.images{
max-width: 350px;
width: 100%;
img{
width: 100%;
@media #{$intermediate-and-smaller}{
@media #{$intermediate}{
margin-bottom: -40px;
}
}
@media #{$medium-and-smaller}{
+ p {
text-align: left;
}
margin-bottom: 20px;
}
&.yt-splash{
background-image: url('/images/annual-report/2021/3_Community Section/YT data splash.svg');
background-size: contain;
height: 300px;
max-width: 300px;
background-repeat: no-repeat;
position: relative;
.num-block{
position: absolute;
font-weight: bold;
width: 155px;
text-align: center;
&.one{
top: 41px;
left: 147px;
}
&.two{
top: 74px;
left: -5px;
}
&.three{
top: 175px;
left: 91px;
}
.num{
font-size: 34px;
}
.small-text{
font-size: 18px;
}
}
}
}
+ p {
@media #{$intermediate}{
text-align: left;
}
}
}
@ -1541,15 +1601,52 @@ img.comment-viz{
}
}
.sparkles{
position: relative;
width: calc(100% - 70px);
margin: 0 auto -267px;
z-index: 1;
display: flex;
justify-content: space-between;
height: 145px;
align-items: flex-start;
@media #{$intermediate-and-smaller} {
margin: 0 auto -251px;
height: 119px;
}
// @media #{$medium-and-smaller} {
// height: 150px;
// overflow: hidden;
// width: 100%;
// }
.sparkle-left{
@media #{$medium-and-smaller}{
margin-left: -40px;
}
}
.sparkle-right{
@media #{$medium-and-smaller}{
margin-right: -40px;
}
}
.down-arrow{
align-self: flex-end;
width: 50px;
}
}
.year-in-review{
position: relative;
padding: 180px 0;
padding: 330px 0 180px 0;
display: flex;
flex-direction: column;
// overflow-x: hidden;
@media #{$intermediate-and-smaller} {
padding: 80px 15px;
}
overflow-x: hidden;
background-image: url("/images/annual-report/2021/3_Community Section/Timeline/Timeline Background (Base).svg");
background-size: cover;
background-position: top center;
// @media #{$intermediate-and-smaller} {
// padding: 80px 15px;
// }
.upper-wave{
width: 100%;
position: absolute;
@ -1567,7 +1664,7 @@ img.comment-viz{
margin: -40px auto -30px;
z-index: 1;
&.left{
margin-left: calc((100% - 980px)/2 + 230px);
margin-left: calc((100% - 980px)/2 + 245px);
}
&.right{
margin-left: 50%
@ -1585,6 +1682,18 @@ img.comment-viz{
@media #{$timeline-breakpoint} {
display: none;
}
.may{
display: block;
position: absolute;
left: 121px;
top: 1300px;
}
.june{
display: block;
position: absolute;
right: 58px;
top: 2127px;
}
img{
display: block;
position: absolute;
@ -1600,17 +1709,6 @@ img.comment-viz{
right: -50px;
top: 1570px;
}
&.june-2{
right: 0px;
top: 2079px;
width: 25px;
height: 25px;
border-radius: 4px;
}
&.july{
left: 0px;
top: 2270px;
}
}
}
.lower-wave{
@ -1646,6 +1744,7 @@ img.comment-viz{
}
.initiatives-access, .initiatives-community {
overflow: hidden;
.world{
max-width: 700px;
margin: 50px auto;
@ -1732,9 +1831,14 @@ img.comment-viz{
&.center{
text-align: center;
margin-top: 80px;
max-width: 600px;
max-width: 650px;
margin: auto;
margin-top: 70px;
@media #{$small}{
width: calc(100% - 50px);
max-width: 300px;
margin: auto;
}
}
}
.text-and-media-snippet{
@ -1821,7 +1925,25 @@ img.comment-viz{
.community-sds {
text-align: center;
margin-bottom: 68px;
p{
text-align: left;
}
.sds-list {
justify-content: space-between;
margin-top: 15px;
@media #{$intermediate-and-smaller} {
max-width: 100%;
justify-content: center;
}
.sds-tile {
width: 31%;
margin: 0px;
@media #{$intermediate-and-smaller} {
width: 200px;
margin: 8px;
}
}
}
}
.quotes-tag, .blm-tag {
@ -2005,14 +2127,6 @@ img.comment-viz{
@media #{$small}{
height: 300px;
}
&.access {
background-image: url("/images/annual-report/2020/access/createalongs_splash.svg");
}
&.SEC {
background-image: url("/images/annual-report/2020/SEC/aroundtheworld_splash.svg");
}
}
.video-thumbnail .button{
@ -2143,6 +2257,10 @@ img.comment-viz{
text-align: left;
}
}
@media #{$medium-and-smaller}{
width: calc(100% - 50px);
margin: auto;
}
}
.signature{
@ -2168,9 +2286,17 @@ img.comment-viz{
}
p.contain-p{
@media #{$small}{
width: calc(100% - 50px);
max-width: 300px;
margin: auto;
}
}
.thank-you-image{
max-width: 600px;
width: 100%;
width: calc(100% - 50px);
margin: 50px auto;
img{
width: 100%;
@ -2192,11 +2318,15 @@ img.comment-viz{
@media #{$medium} {
max-width: 460px;
}
@media #{$small} {
max-width: 300px;
@media #{$medium-and-smaller}{
width: calc(100% - 50px);
margin: 50px auto;
}
// @media #{$small} {
// max-width: 300px;
// }
img.illo{
margin: 40px 0;
width: 100%;
@ -2222,6 +2352,29 @@ img.comment-viz{
}
}
.aaa-video{
.video-preview{
margin: 60px auto;
}
width: 100%;
max-width: 1000px;
height: 380px;
margin: -50px auto -20px;
background-image: url("/images/annual-report/2021/3_Community Section/AAAAAAAA.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
@media #{$intermediate-and-smaller} {
background-image: none;
}
@media #{$medium} {
height: 267px;
}
@media #{$small} {
height: 250px;
}
}
.supporters-section {
padding: 0px 0 52px 0;
@ -2230,6 +2383,10 @@ img.comment-viz{
display: flex;
flex-direction: column;
align-items: center;
@media #{$medium-and-smaller}{
width: calc(100% - 50px);
// margin: 50px auto;
}
}
.subsection-tag {
@ -2322,7 +2479,8 @@ img.comment-viz{
.supporters-list-side {
margin: 0 1.25rem 0 0;
width: 300px;
max-width: 300px;
width: 100%;
li {
margin: 0 0 .75rem 0;
@ -2452,7 +2610,8 @@ img.comment-viz{
.board-member {
text-align: center;
width: 300px;
max-width: 300px;
width: 100%;
margin-top: 44px;
line-height: 1.5rem;
}
@ -2500,7 +2659,7 @@ img.comment-viz{
}
.donate-section {
background-color: $annual-report-green;
background-color: $annual-report-aqua;
.donate-info {
justify-content: center;
@ -2543,7 +2702,9 @@ img.comment-viz{
}
@media #{$small} {
width: 300px;
max-width: 300px;
width: calc(100% - 50px);
margin: auto;
}
@ -2578,7 +2739,7 @@ img.comment-viz{
top: 50px;
z-index: 9;
box-shadow: 0 0 3px $box-shadow-gray;
background-color: $annual-report-green;
background-color: $annual-report-aqua;
padding: 0;
width: 100%;
height: 58px;

59
src/views/annual-report/2021/country-blurb/country-blurb.jsx
View file

@ -1,59 +0,0 @@
const classNames = require('classnames');
const PropTypes = require('prop-types');
const React = require('react');
require('./country-blurb.scss');
// Class names regular and reverse indicate whether the image should
// be placed on the right of left of the text in wider layouts.
// At smaller widths, the image will always be stacked on top.
// Because the right column would typically stack under the left
// I've named this class reverse since it is using flexbox reverse
// column layout to get the image to always appear on top of the text.
const CountryBlurb = props => (
<div className={classNames('country-blurb', props.className)}>
<div className="half">
<div className="country-info">
<img
src={props.icon}
alt={props.iconAlt}
/>
<div className="country-text">
<h4>{props.title}</h4>
<div className="location">
<img
src={props.listIcon}
alt="location icon"
/>
<span>{props.country}</span>
</div>
</div>
</div>
<p>
{props.children}
</p>
</div>
<div className="half">
<img
className="large"
src={props.largeImage}
alt={props.alt}
/>
</div>
</div>
);
CountryBlurb.propTypes = {
children: PropTypes.node,
icon: PropTypes.string,
title: PropTypes.string,
listIcon: PropTypes.string,
country: PropTypes.string,
className: PropTypes.string,
largeImage: PropTypes.string,
alt: PropTypes.string,
iconAlt: PropTypes.string
};
module.exports = CountryBlurb;

65
src/views/annual-report/2021/country-blurb/country-blurb.scss
View file

@ -1,65 +0,0 @@
@import "../../../../frameless";
.country-blurb{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
margin-bottom: 62px;
&.reverse {
flex-direction: row-reverse;
@media #{$intermediate-and-smaller} {
flex-direction: column-reverse;
}
}
@media #{$intermediate-and-smaller} {
// If we want to support both image on top and image on bottom,
// we can use the regular & reverse classNames
flex-direction: column-reverse;
}
.half{
max-width: 460px;
img.large{
max-width: 380px;
}
}
p{
font-size: 1rem;
text-align: left;
}
}
.country-info{
display: flex;
align-items: center;
img{
width: 65px;
height: 65px;
margin-right: 15px;
}
.country-text{
h4{
margin: 0 0 5px 0;
}
.location{
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 1.25rem;
line-height: 1.5rem;
img{
width: 18px;
height: 18px;
margin-right: 5px;
}
}
}
}

63
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).",
@ -78,7 +78,7 @@
"annualReport.2021.SECCountryLabel": "countries",
"annualReport.2021.SECPartnerNumber": "7",
"annualReport.2021.SECPartnerLabel": "partners",
"annualReport.2021.SECMapParagraph": "Our first cohort included 41 organizations representing 13 countries around the world, united by their commitment to supporting learners from historically marginalized communities in developing their confidence with creative computing.",
"annualReport.2021.SECMapParagraph": "Our first cohort included 41 organizations representing 13 countries around the world, united by their commitment to supporting learners from historically marginalized communities in developing their confidence with creative computing. Their locations are highlighted below:",
"annualReport.2021.spotlightStory": "Spotlight Story",
@ -185,6 +185,14 @@
"annualReport.2021.communityScratchLabText3": "Over 500,000 Scratchers explored the Scratch Lab site in 2021, and they submitted more than 37,000 pieces of feedback.",
"annualReport.2021.communityScratchLabText4": "This feedback has been invaluable as we evaluate and develop Animated Text blocks, Face Sensing blocks, and more potential new features.",
"annualReport.2021.ytData1": "100,000",
"annualReport.2021.ytData1Sub": "subscribers",
"annualReport.2021.ytData2": "9 million",
"annualReport.2021.ytData2Sub": "views on videos",
"annualReport.2021.ytData3Top": "viewers in",
"annualReport.2021.ytData3": "178",
"annualReport.2021.ytData3Sub": "countries",
"annualReport.2021.communitySnapshot2Title": "The Scratch Team on YouTube",
"annualReport.2021.communitySnapshot2Text": "The Scratch Team YouTube channel reached 100,000 subscribers in 2021— a nearly 500 percent increase from 2020! As students, educators, and families evolved in response to the pandemic, we knew we had to create resources that were reactive to their needs.",
"annualReport.2021.communitySnapshot2Text2": "These resources include a series of comprehensive Scratch tutorials that guide users through designing stories, games, and animations on Scratch. In 2021, these videos garnered nearly nine million views from viewers in 178 countries.",
@ -215,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.",
@ -254,6 +262,9 @@
"annualReport.2021.projectBy": "project by",
"annualReport.2021.JuneIlloAttr": "Flags by @ratchild",
"annualReport.2021.OctIlloAttr": "Potato and glasses by @Cupwing",
"annualReport.2021.altMap": "A map of the world showing 41 SEC organizations",
"annualReport.2021.altSECSpotlightImage": "A child plays with a toy in front of an orange background",
"annualReport.2021.altAccessibility": "Two people use sign language in front of a green background.",
@ -271,19 +282,43 @@
"annualReport.2021.altMitchHeadshot": "Founder Mitch Resnick",
"annualReport.2021.altCalendar": "A calendar displaying the year 2021.",
"annualReport.2021.altWorldVisualization": "An illustrated version of the globe.",
"annualReport.2021.altSaudiArabiaVisualization": "",
"annualReport.2021.altSaudiArabiaVisualization": "A bar chart showing that there were more than twice as many new Scratch users in 2021 as there were in 2020.",
"annualReport.2021.altScratchHorizontalCommand": "A yellow Scratch programming component.",
"annualReport.2021.altSECVideoPreview": "The Scratch interface appears on the left and a girl signing appears on the right.",
"annualReport.2021.altScratchJr": "Text reading Scratch jr",
"annualReport.2021.altHorizontalLoop": "A yellow horizontal Scratch programming component.",
"annualReport.2021.altaccessDEICommitteeEquityXDesign": "Two hands lining up physical Scratch components.",
"annualReport.2021.altcommunityVolunteerTranslators": "Hands reaching up in front of a purple background with text bubbles floating above them.",
"annualReport.2021.altScratchLogoText": "A green rectangle with the words 'Scratch Lab' writton on it.",
"annualReport.2021.altScratchLabVideo": "A screenshot of a Scratch project with a play button on top.",
"annualReport.2021.altHat": "A person wearing a yellow hat and pink heart sunglasses.",
"annualReport.2021.altScratchText": "A rainbow Scratch component displaying the text, 'Here we go!'",
"annualReport.2021.altStar": "A girl with a yellow star in front of her face.",
"annualReport.2021.altMouseTrail": "Multiple cut outs of a squirrel head placed randomly on top of each other.",
"annualReport.2021.altSECWorkshops": "People playing together",
"annualReport.2021.altArrowUp": "An arrow pointing up.",
"annualReport.2021.altTranslated": "A scratch component saying \"Hello\" and listing languages that scratch is available in.",
"annualReport.2021.altAboutMe": "The words 'About me' placed over an easel, hedgehog, mango, and soccer ball.",
"annualReport.2021.altClickerGame": "A math game showing an apple, an orange, and a cut up bowl of fruit.",
"annualReport.2021.altLookingForward1": "Interlocking hexagons displaying a swirl, start, and heart.",
"annualReport.2021.altLookingForward2": "A sign post with one arrow poining right displaying a swirl and one arrow pointing left displaying a heart.",
"annualReport.2021.altLookingForward3": "Colorful blocks lined up to create steps with a plant growing on top.",
"annualReport.2021.altSECVideoPreview": "",
"annualReport.2021.altSparkle": "White sparkle decoration",
"annualReport.2021.altDownArrow": "Purple arrow pointing down",
"annualReport.2021.altCard1": "",
"annualReport.2021.altCard2": "",
"annualReport.2021.altCard3": "",
"annualReport.2021.altCard4": "",
"annualReport.2021.altCard5": "",
"annualReport.2021.altCard6": "",
"annualReport.2021.altCard7": "",
"annualReport.2021.altCard8": "",
"annualReport.2021.altCard9": "",
"annualReport.2021.altConnectingLine": "A dotted line connecting timeline elements.",
"annualReport.2021.altApril": "A pen and Scratch components placed on top of a purple background.",
"annualReport.2021.altMay": "A birthday cake in front of a banner of flags displaying various types of LGBTQ+ pride.",
"annualReport.2021.altJune": "A potato, birthday had, and sunglasses on top of a purple background.",
"annualReport.2021.altCard1": "A colorful blob floats in front of a black and gray background next to the words 'A dream In a world of nightmares.'",
"annualReport.2021.altCard2": "A black woman is wearing a yellow headband and gold hoop earrings.",
"annualReport.2021.altCard3": "The scratch cat mascot swings in front of buildings accompanied by text reading 'I think Scratch Cat is a superhero.'",
"annualReport.2021.altCard5": "A smiling block stands next to a text bubble reading 'no matter how anyone dresses, what pronouns they use, or who they love, you should always respect them!'",
"annualReport.2021.altCard6": "A potato wearing sunglasses sits in front of a purple background.",
"annualReport.2021.altCard7": "A colorful birthday hat sits on top of a neon cube.",
"annualReport.2021.altCard9": "'2022' sits in front of a rainbow of ovals.",
"annualReport.2021.altDonateIllustration": "Two hands form the shape of a heart with their fingers inside of a cut out heart shape."
}

2
src/views/annual-report/2021/orgs.json
View file

@ -77,7 +77,7 @@
{
"name": "ILCE Instituto Latino Americano de la Comunicación Educativa",
"region": "México City",
"country": "MX"
"country": "Mexico"
},
{
"name": "Kids Code Jeunesse",

2
src/views/annual-report/2021/supporters.json
View file

@ -23,7 +23,7 @@
"Vista Equity Partners"
],
"imagination": [
"Alex & Ginsburg",
"Alex & Hillary Ginsburg",
"AT&T Aspire",
"James Hill",
"Inversoft/CleanSpeak",

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

@ -0,0 +1,101 @@
const bindAll = require('lodash.bindall');
const PropTypes = require('prop-types');
const React = require('react');
const VideoYoutube = require('../video-youtube/video-youtube.jsx');
// const Spinner = require('../../../../components/spinner/spinner.jsx');
const classNames = require('classnames');
require('./video-preview-youtube.scss');
class VideoPreviewYouTube extends React.Component {
constructor (props) {
super(props);
bindAll(this, [
'handleShowVideo',
'handleVideoLoaded'
]);
this.state = {
videoOpen: false,
spinnerVisible: false
};
}
handleShowVideo () {
this.setState({
videoOpen: true,
spinnerVisible: true
});
}
handleVideoLoaded () {
this.setState({spinnerVisible: false});
}
render () {
return (
// Adding a width to this div allows the videoFoam property on the embedded video
// to fill the size of the div once fullscreen has been entered and exited
<div
className="video-preview"
style={{width: `${this.props.videoWidth}px`}}
>
{this.state.videoOpen ?
(
<div className="spinner-video-container">
<VideoYoutube
className="video"
height={this.props.videoHeight}
videoId={this.props.videoId}
width={this.props.videoWidth}
onVideoStart={this.handleVideoLoaded}
/>
</div>
) : (
<div
className="video-thumbnail"
onClick={this.handleShowVideo}
>
{/* Load an invisible spinner so that the image has a chance to load before it's needed */}
<img
className={classNames('loading-spinner', 'hidden-spinner')}
src="/svgs/modal/spinner-white.svg"
/>
<img
src={this.props.thumbnail}
style={{
width: `${this.props.thumbnailWidth}px` || 'auto',
height: `${this.props.thumbnailHeight}px` || 'auto'
}}
alt={this.props.alt}
/>
{this.props.buttonMessage.length > 0 &&
<a
onClick={this.handleShowVideo}
>
<div className="button">
{this.props.buttonMessage}
</div>
</a>
}
</div>
)
}
</div>
);
}
}
VideoPreviewYouTube.propTypes = {
buttonMessage: PropTypes.string.isRequired,
thumbnail: PropTypes.string.isRequired,
thumbnailHeight: PropTypes.string,
thumbnailWidth: PropTypes.string,
videoHeight: PropTypes.string,
videoId: PropTypes.string.isRequired,
videoWidth: PropTypes.string,
alt: PropTypes.string
};
module.exports = VideoPreviewYouTube;

55
src/views/annual-report/2021/video-preview-youtube/video-preview-youtube.scss Normal file
View file

@ -0,0 +1,55 @@
.video-preview {
display: flex;
justify-content: center;
align-items: center;
.video-player {
height: auto;
border: none;
border-radius: .75rem;
}
}
.video-thumbnail {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
img {
cursor: pointer;
}
.button {
margin-top: 20px;
}
}
.loading-spinner {
margin: auto;
width: 5rem;
height: 5rem;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.hidden-spinner {
visibility: hidden;
}
.spinner-video-container {
width: 100%;
height: 100%;
position: relative;
}
.iframe-video-not-started {
visibility: hidden;
}
.iframe-video-started {
visibility: visible;
}

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

@ -0,0 +1,42 @@
const PropTypes = require('prop-types');
const React = require('react');
const classNames = require('classnames');
require('./video-youtube.scss');
// eslint-disable-next-line react/prefer-stateless-function
class VideoYoutube extends React.Component {
render () {
return (
<div className={classNames('video-player', this.props.className)}>
<iframe
allowFullScreen
className="wistia_embed"
frameBorder="0" // deprecated attribute
height={this.props.height}
scrolling="no" // deprecated attribute
src={`https://www.youtube.com/embed/${this.props.videoId}?autoplay=1`}
title={this.props.title}
width={this.props.width}
/>
</div>
);
}
}
VideoYoutube.defaultProps = {
height: '225',
title: '',
width: '400'
};
VideoYoutube.propTypes = {
className: PropTypes.string,
height: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
videoId: PropTypes.string.isRequired,
width: PropTypes.string.isRequired
};
module.exports = VideoYoutube;

9
src/views/annual-report/2021/video-youtube/video-youtube.scss Normal file
View file

@ -0,0 +1,9 @@
@import "../../../../colors";
@import "../../../../frameless";
.video-player {
border: .25rem solid $box-shadow-light-gray;
border-radius: .75rem;
height: 225px;
overflow: hidden;
}

24
src/views/splash/donate/donate-banner.jsx
View file

@ -14,6 +14,8 @@ const navigateToDonatePage = () => {
window.location = donateURL;
};
const SCRATCH_CELBRATION_BANNER_END_TIME = new Date(2022, 4, 21).getTime(); // May 21 2022 (months are zero indexed)
// Following the example in the Google Analytics doc here to track
// clicks going out to the donate page from this banner:
// https://support.google.com/analytics/answer/1136920?hl=en
@ -37,9 +39,25 @@ const DonateTopBanner = ({
src="/images/ideas/try-it-icon.svg"
/>
<div className="donate-central-items">
<p className="donate-text">
<FormattedMessage id="donatebanner.askSupport" />
</p>
{(Date.now() < SCRATCH_CELBRATION_BANNER_END_TIME) ?
(
<p className="donate-text">
<FormattedMessage
id="donatebanner.scratchWeek"
values={{
celebrationLink: (
<a href="https://sip.scratch.mit.edu/scratch-celebration/">
<FormattedMessage id="donatebanner.learnMore" />
</a>
)
}}
/>
</p>
) : (
<p className="donate-text">
<FormattedMessage id="donatebanner.askSupport" />
</p>
)}
<Button
className="donate-button"
key="add-to-studio-button"

4
src/views/splash/donate/donate-banner.scss
View file

@ -59,6 +59,10 @@ $tile-height: 244px;
right: 1rem;
top: auto;
}
a {
color: $ui-white;
text-decoration: underline;
}
}
@media only screen and (max-width: $mobileIntermediate) {

129
static/images/annual-report/2021/1_SEC Section/Workshops.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 28 KiB

33
static/images/annual-report/2021/2_Access Section/Committees start illustration.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 12 KiB

43
static/images/annual-report/2021/3_Community Section/Timeline/April Illustration.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 21 KiB

143
static/images/annual-report/2021/3_Community Section/Timeline/June Illustration.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 59 KiB

58
static/images/annual-report/2021/3_Community Section/Timeline/Oct Illustration.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 23 KiB

23
static/images/annual-report/2021/4_Looking Forward/looking forward 1.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

14
static/images/annual-report/2021/4_Looking Forward/looking forward 2.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

17
static/images/annual-report/2021/4_Looking Forward/looking forward 3.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

300
static/images/annual-report/2021/Masthead Illustration.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 MiB

After

Width:  |  Height:  |  Size: 61 KiB

BIN
static/images/annual-report/2021/Masthead_Illo_screenshot.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.4 MiB

18
static/images/annual-report/2021/Wave Icon.svg
View file

@ -1,11 +1,11 @@
<svg width="141" height="141" viewBox="0 0 141 141" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5299 59.118C4.09587 49.539 23.4809 46.307 33.9619 65.077C39.9529 75.806 47.4989 66.568 50.5959 58.6C54.6719 48.113 61.2059 34.629 64.9679 26.454C69.2169 17.223 80.8339 23.259 77.2779 31.589C72.4369 42.927 62.2769 61.184 65.2849 62.993C68.5279 64.944 78.7549 39.745 87.3249 25.737C93.5709 15.526 103.693 21.27 99.1699 32.423C93.7549 45.776 80.8319 63.782 83.0039 65.519C85.1899 67.266 96.2049 49.848 102.776 39.196C108.129 30.52 118.156 37.52 113.285 45.446C105.951 57.378 90.4799 75.999 92.4289 77.674C94.9919 79.875 103.488 67.459 108.532 61.259C114.638 53.752 122.122 60.594 117.444 67.03C109.198 78.374 88.1299 105.083 82.1219 112.407C67.9449 129.685 26.1389 116.422 26.1459 87.615C26.1509 72.198 14.1899 64.57 10.5299 59.118Z" fill="#825331"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.2769 29.084C35.4959 31.686 33.4309 36.139 33.8879 40.705Z" fill="#825331"/>
<path d="M39.2769 29.084C35.4959 31.686 33.4309 36.139 33.8879 40.705" stroke="#FEFEFE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.0345 20.0059C25.1905 24.7149 21.4535 32.7759 22.2805 41.0419Z" fill="#825331"/>
<path d="M32.0345 20.0059C25.1905 24.7149 21.4535 32.7759 22.2805 41.0419" stroke="#FEFEFE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M111.028 102.443C115.432 100.804 118.594 96.898 119.281 92.25Z" fill="#825331"/>
<path d="M111.028 102.443C115.432 100.804 118.594 96.898 119.281 92.25" stroke="#FEFEFE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M115.952 113.264C123.924 110.297 129.648 103.226 130.89 94.8125Z" fill="#825331"/>
<path d="M115.952 113.264C123.924 110.297 129.648 103.226 130.89 94.8125" stroke="#FEFEFE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.53 59.2137C4.09596 49.6347 23.481 46.4027 33.962 65.1727C39.953 75.9017 47.499 66.6637 50.596 58.6957C54.672 48.2087 61.206 34.7247 64.968 26.5497C69.217 17.3187 80.834 23.3547 77.278 31.6847C72.437 43.0227 62.277 61.2797 65.285 63.0887C68.528 65.0397 78.755 39.8407 87.325 25.8327C93.571 15.6217 103.693 21.3657 99.17 32.5187C93.755 45.8717 80.832 63.8777 83.004 65.6147C85.19 67.3617 96.205 49.9437 102.776 39.2917C108.129 30.6157 118.156 37.6157 113.285 45.5417C105.951 57.4737 90.48 76.0947 92.429 77.7697C94.992 79.9707 103.488 67.5547 108.532 61.3547C114.638 53.8477 122.122 60.6897 117.444 67.1257C109.198 78.4697 88.13 105.179 82.122 112.503C67.945 129.781 26.139 116.518 26.146 87.7107C26.151 72.2937 14.19 64.6657 10.53 59.2137Z" fill="#4C2E19"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.2768 29.1797C35.4958 31.7817 33.4308 36.2347 33.8878 40.8007Z" fill="#4C2E19"/>
<path d="M39.2768 29.1797C35.4958 31.7817 33.4308 36.2347 33.8878 40.8007" stroke="#FEFEFE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.0346 20.1016C25.1906 24.8106 21.4536 32.8716 22.2806 41.1376Z" fill="#4C2E19"/>
<path d="M32.0346 20.1016C25.1906 24.8106 21.4536 32.8716 22.2806 41.1376" stroke="#FEFEFE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M111.028 102.539C115.432 100.9 118.594 96.9937 119.281 92.3457Z" fill="#4C2E19"/>
<path d="M111.028 102.539C115.432 100.9 118.594 96.9937 119.281 92.3457" stroke="#FEFEFE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M115.952 113.36C123.924 110.393 129.648 103.322 130.89 94.9082Z" fill="#4C2E19"/>
<path d="M115.952 113.36C123.924 110.393 129.648 103.322 130.89 94.9082" stroke="#FEFEFE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2 KiB

After

Width:  |  Height:  |  Size: 2 KiB

92
test/integration/project-page.test.js
View file

@ -1,4 +1,5 @@
// These tests do not sign in with a user
// Adding tests that sign in with user #6
const SeleniumHelper = require('./selenium-helpers.js');
@ -6,12 +7,27 @@ const {
buildDriver,
clickXpath,
findByXpath,
signIn,
waitUntilVisible
} = new SeleniumHelper();
let rootUrl = process.env.ROOT_URL || 'https://scratch.ly';
let projectId = process.env.TEST_PROJECT_ID || 1300006196;
let projectUrl = rootUrl + '/projects/' + projectId;
// project IDs and URLs
let unownedSharedId = process.env.UNOWNED_SHARED_PROJECT_ID || 1300006196;
let unownedSharedUrl = rootUrl + '/projects/' + unownedSharedId;
let ownedSharedId = process.env.OWNED_SHARED_PROJECT_ID || 1300009464;
let ownedSharedUrl = rootUrl + '/projects/' + ownedSharedId;
let ownedUnsharedID = process.env.OWNED_UNSHARED_PROJECT_ID || 1300009465;
let ownedUnsharedUrl = rootUrl + '/projects/' + ownedUnsharedID;
let unownedUnsharedID = process.env.UNOWNED_UNSHARED_PROJECT_ID || 1300006306;
let unownedUnsharedUrl = rootUrl + '/projects/' + unownedUnsharedID;
let username = process.env.SMOKE_USERNAME + '6';
let password = process.env.SMOKE_PASSWORD;
jest.setTimeout(60000);
@ -25,7 +41,7 @@ describe('www-integration project-page signed out', () => {
});
beforeEach(async () => {
await driver.get(projectUrl);
await driver.get(unownedSharedUrl);
let gfOverlay = await findByXpath('//div[@class="stage-wrapper_stage-wrapper_2bejr box_box_2jjDp"]');
await waitUntilVisible(gfOverlay, driver);
});
@ -46,7 +62,7 @@ describe('www-integration project-page signed out', () => {
await clickXpath('//button[@class="button action-button copy-link-button"]');
let projectLink = await findByXpath('//input[@name="link"]');
let linkValue = await projectLink.getAttribute('value');
await expect(linkValue).toEqual(projectUrl);
await expect(linkValue).toEqual(unownedSharedUrl);
});
test('Click Username to go to profile page', async ()=> {
@ -67,6 +83,72 @@ describe('www-integration project-page signed out', () => {
await clickXpath('//div[@class="list-header-link"]');
let originalLink = await findByXpath('//h2/a');
let link = await originalLink.getAttribute('href');
await expect(link).toEqual(rootUrl + '/projects/' + projectId + '/');
await expect(link).toEqual(rootUrl + '/projects/' + unownedSharedId + '/');
});
// Load an unshared project while signed out, get error
test('Load an ushared project you do not own (error)', async () => {
await driver.get(unownedUnsharedUrl);
let unavailableImage = await findByXpath('//img[@class="not-available-image"]');
await waitUntilVisible(unavailableImage, driver);
let unavailableVisible = await unavailableImage.isDisplayed();
await expect(unavailableVisible).toBe(true);
});
});
// Logged in tests
describe('www-integration project-page signed in', () => {
beforeAll(async () => {
// expect(projectUrl).toBe(defined);
driver = await buildDriver('www-integration project-page signed in');
await driver.get(rootUrl);
await driver.sleep(1000);
await signIn(username, password);
await findByXpath('//span[contains(@class, "profile-name")]');
});
beforeEach(async () => {
await driver.get(rootUrl);
});
afterAll(async () => await driver.quit());
// LOGGED in TESTS
// Load a shared project you own
test('Load a shared project you own', async () => {
await driver.get(ownedSharedUrl);
let gfOverlay = await findByXpath('//div[@class="stage-wrapper_stage-wrapper_2bejr box_box_2jjDp"]');
await waitUntilVisible(gfOverlay, driver);
let gfVisible = await gfOverlay.isDisplayed();
await expect(gfVisible).toBe(true);
});
// Load a shared project you don't own
test('Load a shared project you do not own', async () => {
await driver.get(unownedSharedUrl);
let gfOverlay = await findByXpath('//div[@class="stage-wrapper_stage-wrapper_2bejr box_box_2jjDp"]');
await waitUntilVisible(gfOverlay, driver);
let gfVisible = await gfOverlay.isDisplayed();
await expect(gfVisible).toBe(true);
});
// Load an unshared project you own
test('Load a shared project you own', async () => {
await driver.get(ownedUnsharedUrl);
let gfOverlay = await findByXpath('//div[@class="stage-wrapper_stage-wrapper_2bejr box_box_2jjDp"]');
await waitUntilVisible(gfOverlay, driver);
let gfVisible = await gfOverlay.isDisplayed();
await expect(gfVisible).toBe(true);
});
// Load an unshared project you don't own, get error
test('Load an ushared project you do not own (error)', async () => {
await driver.get(unownedUnsharedUrl);
let unavailableImage = await findByXpath('//img[@class="not-available-image"]');
await waitUntilVisible(unavailableImage, driver);
let unavailableVisible = await unavailableImage.isDisplayed();
await expect(unavailableVisible).toBe(true);
});
});

36
test/unit/components/donate-banner.test.jsx Normal file
View file

@ -0,0 +1,36 @@
import React from 'react';
import {mountWithIntl} from '../../helpers/intl-helpers.jsx';
import DonateTopBanner from '../../../src/views/splash/donate/donate-banner';
describe('DonateBannerTest', () => {
let realDateNow;
beforeEach(() => {
realDateNow = Date.now.bind(global.Date);
});
afterEach(() => {
global.Date.now = realDateNow;
});
test('Testing Scratch week banner message', () => {
const component = mountWithIntl(
<DonateTopBanner />
);
expect(component.find('div.donate-banner').exists()).toEqual(true);
expect(component.find('p.donate-text').exists()).toEqual(true);
expect(component.find('FormattedMessage[id="donatebanner.scratchWeek"]').exists()).toEqual(true);
expect(component.find('FormattedMessage[id="donatebanner.askSupport"]').exists()).toEqual(false);
});
test('testing default message comes back after May 21 ', () => {
// Date after Scratch week
global.Date.now = () => new Date(2022, 4, 22).getTime();
const component = mountWithIntl(
<DonateTopBanner />
);
expect(component.find('div.donate-banner').exists()).toEqual(true);
expect(component.find('p.donate-text').exists()).toEqual(true);
expect(component.find('FormattedMessage[id="donatebanner.askSupport"]').exists()).toEqual(true);
expect(component.find('FormattedMessage[id="donatebanner.scratchWeek"]').exists()).toEqual(false);
});
});