mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 01:25:52 -05:00
Merge pull request #7210 from aoneill01/scratch-link-download-page
feat: Create landing page for Scratch Link download (ENA-69)
This commit is contained in:
Andy O'Neill
GitHub
commit
192a4cd364
17 changed files with 507 additions and 91 deletions
|
|
@ -258,6 +258,46 @@
|
|||
}
|
||||
}
|
||||
|
||||
.hardware-cards {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 3em;
|
||||
|
||||
// 1 column
|
||||
@media #{$medium-and-smaller} {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.hardware-card {
|
||||
border: 1px solid $ui-border;
|
||||
border-radius: .5rem;
|
||||
background-color: $ui-white;
|
||||
overflow: hidden;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.hardware-card-image {
|
||||
background-color: $ui-blue-10percent;
|
||||
padding: 1rem 0 1rem;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
height: 100px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hardware-card-info {
|
||||
padding: 1rem;
|
||||
|
||||
p {
|
||||
margin: .2rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
div.cards+div.faq {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,8 +12,7 @@ const ExtensionRequirements = props => (
|
|||
<FormattedMessage id="extensionHeader.requirements" />
|
||||
</span>
|
||||
<FlexRow className="extension-requirements">
|
||||
{props.bluetoothStandard ? (
|
||||
<React.Fragment>
|
||||
{!props.hideWindows && (
|
||||
<span>
|
||||
<img
|
||||
alt=""
|
||||
|
|
@ -21,6 +20,8 @@ const ExtensionRequirements = props => (
|
|||
/>
|
||||
Windows 10 version 1709+
|
||||
</span>
|
||||
)}
|
||||
{!props.hideMac && (
|
||||
<span>
|
||||
<img
|
||||
alt=""
|
||||
|
|
@ -28,7 +29,8 @@ const ExtensionRequirements = props => (
|
|||
/>
|
||||
macOS 10.13+
|
||||
</span>
|
||||
<React.Fragment>
|
||||
)}
|
||||
{!props.hideChromeOS && (
|
||||
<span>
|
||||
<img
|
||||
alt=""
|
||||
|
|
@ -36,6 +38,8 @@ const ExtensionRequirements = props => (
|
|||
/>
|
||||
ChromeOS
|
||||
</span>
|
||||
)}
|
||||
{!props.hideAndroid && (
|
||||
<span>
|
||||
<img
|
||||
alt=""
|
||||
|
|
@ -43,11 +47,14 @@ const ExtensionRequirements = props => (
|
|||
/>
|
||||
Android 6.0+
|
||||
</span>
|
||||
</React.Fragment>
|
||||
)}
|
||||
{!props.hideBluetooth && (
|
||||
<span>
|
||||
<img src="/svgs/extensions/bluetooth.svg" />
|
||||
Bluetooth
|
||||
</span>
|
||||
)}
|
||||
{!props.hideScratchLink && (
|
||||
<span>
|
||||
<img
|
||||
alt=""
|
||||
|
|
@ -55,19 +62,27 @@ const ExtensionRequirements = props => (
|
|||
/>
|
||||
Scratch Link
|
||||
</span>
|
||||
</React.Fragment>
|
||||
) : props.children}
|
||||
)}
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
);
|
||||
|
||||
ExtensionRequirements.propTypes = {
|
||||
bluetoothStandard: PropTypes.bool,
|
||||
children: PropTypes.node
|
||||
hideAndroid: PropTypes.bool,
|
||||
hideBluetooth: PropTypes.bool,
|
||||
hideChromeOS: PropTypes.bool,
|
||||
hideMac: PropTypes.bool,
|
||||
hideScratchLink: PropTypes.bool,
|
||||
hideWindows: PropTypes.bool
|
||||
};
|
||||
|
||||
ExtensionRequirements.defaultProps = {
|
||||
bluetoothStandard: false
|
||||
hideAndroid: false,
|
||||
hideBluetooth: false,
|
||||
hideChromeOS: false,
|
||||
hideMac: false,
|
||||
hideScratchLink: false,
|
||||
hideWindows: false
|
||||
};
|
||||
|
||||
module.exports = ExtensionRequirements;
|
||||
|
|
|
|||
32
src/components/extension-landing/hardware-card.jsx
Normal file
32
src/components/extension-landing/hardware-card.jsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
const PropTypes = require('prop-types');
|
||||
const React = require('react');
|
||||
|
||||
const HardwareCard = props => (
|
||||
<a
|
||||
className="hardware-card short"
|
||||
href={props.cardUrl}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<div className="hardware-card-image">
|
||||
<img
|
||||
alt={props.imageAlt}
|
||||
src={props.imageSrc}
|
||||
/>
|
||||
</div>
|
||||
<div className="hardware-card-info">
|
||||
<h4>{props.title}</h4>
|
||||
<p>{props.description}</p>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
|
||||
HardwareCard.propTypes = {
|
||||
cardUrl: PropTypes.string,
|
||||
description: PropTypes.string,
|
||||
imageAlt: PropTypes.string,
|
||||
imageSrc: PropTypes.string,
|
||||
title: PropTypes.string
|
||||
};
|
||||
|
||||
module.exports = HardwareCard;
|
||||
|
|
@ -15,6 +15,7 @@ const OSChooser = props => (
|
|||
<div className="os-chooser">
|
||||
<FlexRow className="inner">
|
||||
<FormattedMessage id="oschooser.choose" />
|
||||
{!props.hideWindows && (
|
||||
<Button
|
||||
className={classNames({active: props.currentOS === OS_ENUM.WINDOWS})}
|
||||
onClick={() => // eslint-disable-line react/jsx-no-bind
|
||||
|
|
@ -24,6 +25,8 @@ const OSChooser = props => (
|
|||
<img src="/svgs/extensions/windows.svg" />
|
||||
Windows
|
||||
</Button>
|
||||
)}
|
||||
{!props.hideMac && (
|
||||
<Button
|
||||
className={classNames({active: props.currentOS === OS_ENUM.MACOS})}
|
||||
onClick={() => // eslint-disable-line react/jsx-no-bind
|
||||
|
|
@ -33,6 +36,8 @@ const OSChooser = props => (
|
|||
<img src="/svgs/extensions/mac.svg" />
|
||||
macOS
|
||||
</Button>
|
||||
)}
|
||||
{!props.hideChromeOS && (
|
||||
<Button
|
||||
className={classNames({active: props.currentOS === OS_ENUM.CHROMEOS})}
|
||||
onClick={() => // eslint-disable-line react/jsx-no-bind
|
||||
|
|
@ -42,6 +47,8 @@ const OSChooser = props => (
|
|||
<img src="/svgs/extensions/chromeos.svg" />
|
||||
ChromeOS
|
||||
</Button>
|
||||
)}
|
||||
{!props.hideAndroid && (
|
||||
<Button
|
||||
className={classNames({active: props.currentOS === OS_ENUM.ANDROID})}
|
||||
onClick={() => // eslint-disable-line react/jsx-no-bind
|
||||
|
|
@ -51,13 +58,25 @@ const OSChooser = props => (
|
|||
<img src="/svgs/extensions/android.svg" />
|
||||
Android
|
||||
</Button>
|
||||
)}
|
||||
</FlexRow>
|
||||
</div>
|
||||
);
|
||||
|
||||
OSChooser.propTypes = {
|
||||
currentOS: PropTypes.string,
|
||||
handleSetOS: PropTypes.func
|
||||
handleSetOS: PropTypes.func,
|
||||
hideAndroid: PropTypes.bool,
|
||||
hideChromeOS: PropTypes.bool,
|
||||
hideMac: PropTypes.bool,
|
||||
hideWindows: PropTypes.bool
|
||||
};
|
||||
|
||||
OSChooser.defaultProps = {
|
||||
hideAndroid: false,
|
||||
hideChromeOS: false,
|
||||
hideMac: false,
|
||||
hideWindows: false
|
||||
};
|
||||
|
||||
const wrappedOSChooser = injectIntl(OSChooser);
|
||||
|
|
|
|||
|
|
@ -298,6 +298,19 @@
|
|||
"view": "download/scratch2/download",
|
||||
"title": "Scratch 2.0"
|
||||
},
|
||||
{
|
||||
"name": "download-scratch-link",
|
||||
"pattern": "^/download/scratch-link/?(\\?.*)?$",
|
||||
"routeAlias": "/download/scratch-link",
|
||||
"view": "download/scratch-link/download",
|
||||
"title": "Scratch Link Download"
|
||||
},
|
||||
{
|
||||
"name": "download-scratch-link-redirect",
|
||||
"pattern": "^/download/link/?(\\?.*)?$",
|
||||
"routeAlias": "/download/link",
|
||||
"redirect": "/download/scratch-link"
|
||||
},
|
||||
{
|
||||
"name": "search",
|
||||
"pattern": "^/search/:projects/?$",
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ class Boost extends ExtensionLanding {
|
|||
src="/images/boost/boost-header.svg"
|
||||
/>}
|
||||
renderRequirements={
|
||||
<ExtensionRequirements bluetoothStandard />
|
||||
<ExtensionRequirements />
|
||||
}
|
||||
/>
|
||||
<OSChooser
|
||||
|
|
|
|||
153
src/views/download/scratch-link/download.jsx
Normal file
153
src/views/download/scratch-link/download.jsx
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
import React, {useState} from 'react';
|
||||
import {FormattedMessage, injectIntl, intlShape} from 'react-intl';
|
||||
|
||||
import Page from '../../../components/page/www/page.jsx';
|
||||
import render from '../../../lib/render.jsx';
|
||||
|
||||
import FlexRow from '../../../components/flex-row/flex-row.jsx';
|
||||
|
||||
import OSChooser from '../../../components/os-chooser/os-chooser.jsx';
|
||||
import detectOS from '../../../lib/detect-os.js';
|
||||
|
||||
import HardwareCard from '../../../components/extension-landing/hardware-card.jsx';
|
||||
import ExtensionRequirements from '../../../components/extension-landing/extension-requirements.jsx';
|
||||
import ExtensionSection from '../../../components/extension-landing/extension-section.jsx';
|
||||
import ExtensionTroubleshooting from '../../../components/extension-landing/extension-troubleshooting.jsx';
|
||||
import InstallScratchLink from '../../../components/extension-landing/install-scratch-link.jsx';
|
||||
|
||||
import {isDownloaded} from '../../../components/install-scratch/install-util.js';
|
||||
|
||||
import '../../../components/extension-landing/extension-landing.scss';
|
||||
import './download.scss';
|
||||
|
||||
const ScratchLink = ({intl}) => {
|
||||
const [os, setOS] = useState(detectOS());
|
||||
|
||||
return (
|
||||
<div className="extension-landing link">
|
||||
<div className="extension-header">
|
||||
<FlexRow className="inner">
|
||||
<FlexRow className="column extension-info">
|
||||
<FlexRow className="column extension-copy">
|
||||
<h1><img
|
||||
alt={intl.formatMessage({id: 'scratchLink.linkLogo'})}
|
||||
width="40px"
|
||||
src="/images/scratchlink/scratch-link-logo.svg"
|
||||
/>{intl.formatMessage({id: 'scratchLink.headerTitle'})}</h1>
|
||||
<FormattedMessage id="scratchLink.headerText" />
|
||||
|
||||
</FlexRow>
|
||||
<ExtensionRequirements
|
||||
hideAndroid
|
||||
hideChromeOS
|
||||
hideScratchLink
|
||||
/>
|
||||
</FlexRow>
|
||||
<div className="extension-image">
|
||||
<img src="/images/download/scratch-link-illustration.svg" />
|
||||
</div>
|
||||
</FlexRow>
|
||||
</div>
|
||||
<OSChooser
|
||||
currentOS={os}
|
||||
handleSetOS={setOS}
|
||||
hideChromeOS
|
||||
hideAndroid
|
||||
/>
|
||||
{(isDownloaded(os)) && (
|
||||
<InstallScratchLink
|
||||
currentOS={os}
|
||||
/>
|
||||
)}
|
||||
<ExtensionSection className="things-to-try">
|
||||
<h2><FormattedMessage id="scratchLink.thingsToTry" /></h2>
|
||||
<h3><FormattedMessage id="scratchLink.compatibleDevices" /></h3>
|
||||
<div className="hardware-cards">
|
||||
<HardwareCard
|
||||
cardUrl="/microbit"
|
||||
description={intl.formatMessage({id: 'scratchLink.microbitDescription'})}
|
||||
imageAlt={intl.formatMessage({id: 'scratchLink.microbitTitle'})}
|
||||
imageSrc="/images/microbit/microbit.svg"
|
||||
title={intl.formatMessage({id: 'scratchLink.microbitTitle'})}
|
||||
/>
|
||||
<HardwareCard
|
||||
cardUrl="/ev3"
|
||||
description={intl.formatMessage({id: 'scratchLink.ev3Description'})}
|
||||
imageAlt={intl.formatMessage({id: 'scratchLink.ev3Title'})}
|
||||
imageSrc="/images/ev3/ev3.svg"
|
||||
title={intl.formatMessage({id: 'scratchLink.ev3Title'})}
|
||||
/>
|
||||
<HardwareCard
|
||||
cardUrl="/wedo"
|
||||
description={intl.formatMessage({id: 'scratchLink.wedoDescription'})}
|
||||
imageAlt={intl.formatMessage({id: 'scratchLink.wedoTitle'})}
|
||||
imageSrc="/images/wedo2/wedo2.svg"
|
||||
title={intl.formatMessage({id: 'scratchLink.wedoTitle'})}
|
||||
/>
|
||||
<HardwareCard
|
||||
cardUrl="/boost"
|
||||
description={intl.formatMessage({id: 'scratchLink.boostDescription'})}
|
||||
imageAlt={intl.formatMessage({id: 'scratchLink.boostTitle'})}
|
||||
imageSrc="/images/boost/boost.svg"
|
||||
title={intl.formatMessage({id: 'scratchLink.boostTitle'})}
|
||||
/>
|
||||
<HardwareCard
|
||||
cardUrl="/vernier"
|
||||
description={intl.formatMessage({id: 'scratchLink.vernierDescription'})}
|
||||
imageAlt={intl.formatMessage({id: 'scratchLink.vernierTitle'})}
|
||||
imageSrc="/images/gdxfor/gdxfor.svg"
|
||||
title={intl.formatMessage({id: 'scratchLink.vernierTitle'})}
|
||||
/>
|
||||
</div>
|
||||
</ExtensionSection>
|
||||
<ExtensionTroubleshooting
|
||||
deviceName={intl.formatMessage({id: 'scratchLink.headerTitle'})}
|
||||
scratchLinkOnly
|
||||
>
|
||||
{isDownloaded(os) && (
|
||||
<React.Fragment>
|
||||
<h3 className="faq-title"><FormattedMessage id="scratchLink.checkOSVersionTitle" /></h3>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="scratchLink.checkOSVersionText"
|
||||
values={{
|
||||
winOSVersionLink: (
|
||||
<a
|
||||
href="https://support.microsoft.com/en-us/help/13443/windows-which-operating-system"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FormattedMessage id="scratchLink.winOSVersionLinkText" />
|
||||
</a>
|
||||
),
|
||||
macOSVersionLink: (
|
||||
<a
|
||||
href="https://support.apple.com/en-us/HT201260"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FormattedMessage id="scratchLink.macOSVersionLinkText" />
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
<p><FormattedMessage id="extensions.checkOsVersionText2" /></p>
|
||||
</React.Fragment>
|
||||
)}
|
||||
<h3 className="faq-title"><FormattedMessage id="scratchLink.closeScratchCopiesTitle" /></h3>
|
||||
<p>
|
||||
<FormattedMessage id="scratchLink.closeScratchCopiesText" />
|
||||
</p>
|
||||
</ExtensionTroubleshooting>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
ScratchLink.propTypes = {
|
||||
intl: intlShape.isRequired
|
||||
};
|
||||
|
||||
const WrappedScratchLink = injectIntl(ScratchLink);
|
||||
|
||||
render(<Page><WrappedScratchLink /></Page>, document.getElementById('app'));
|
||||
25
src/views/download/scratch-link/download.scss
Normal file
25
src/views/download/scratch-link/download.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
@import "../../../colors";
|
||||
|
||||
.link {
|
||||
.extension-header {
|
||||
background-color: $ui-aqua;
|
||||
|
||||
.inner {
|
||||
flex-direction: row;
|
||||
|
||||
.extension-info {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 0;
|
||||
|
||||
.extension-copy {
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
.extension-image {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
24
src/views/download/scratch-link/l10n.json
Normal file
24
src/views/download/scratch-link/l10n.json
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"scratchLink.headerText": "Scratch Link allows you to connect hardware to interact with your Scratch projects. Open new possibilities by combining your digital projects with the physical world.",
|
||||
"scratchLink.headerTitle": "Scratch Link",
|
||||
"scratchLink.linkLogo": "Scratch Link logo",
|
||||
"scratchLink.troubleshootingTitle": "Troubleshooting",
|
||||
"scratchLink.checkOSVersionTitle": "Make sure your operating system is compatible with Scratch Link",
|
||||
"scratchLink.checkOSVersionText": "The minimum operating system versions are listed at the top of this page. See instructions for checking your version of {winOSVersionLink} or {macOSVersionLink}.",
|
||||
"scratchLink.winOSVersionLinkText": "Windows",
|
||||
"scratchLink.macOSVersionLinkText": "Mac OS",
|
||||
"scratchLink.closeScratchCopiesTitle": "Close other copies of Scratch",
|
||||
"scratchLink.closeScratchCopiesText": "Only one copy of Scratch can connect with Scratch Link at a time. If you have Scratch open in other browser tabs, close it and try again.",
|
||||
"scratchLink.thingsToTry": "Things to Try",
|
||||
"scratchLink.compatibleDevices": "Compatible with Scratch Link",
|
||||
"scratchLink.microbitTitle": "micro:bit",
|
||||
"scratchLink.microbitDescription": "micro:bit is a tiny circuit board designed to help kids learn to code and create with technology.",
|
||||
"scratchLink.ev3Title": "LEGO MINDSTORMS EV3",
|
||||
"scratchLink.ev3Description": "LEGO MINDSTORMS Education EV3 is an invention kit with motors and sensors you can use to build interactive robotic creations.",
|
||||
"scratchLink.wedoTitle": "LEGO Education WeDo 2.0",
|
||||
"scratchLink.wedoDescription": "LEGO Education WeDo 2.0 is an introductory invention kit you can use to build interactive robots and other creations.",
|
||||
"scratchLink.boostTitle": "LEGO BOOST",
|
||||
"scratchLink.boostDescription": "The LEGO BOOST kit brings your LEGO creations to life with powerful motors, a color sensor and more.",
|
||||
"scratchLink.vernierTitle": "Vernier Force & Acceleration",
|
||||
"scratchLink.vernierDescription": "The Vernier Go Direct Force & Acceleration sensor is a powerful scientific tool that unlocks new ways to connect the physical world to your Scratch projects."
|
||||
}
|
||||
|
|
@ -63,7 +63,7 @@ class EV3 extends ExtensionLanding {
|
|||
videoId="0huu6wfiki"
|
||||
/>}
|
||||
renderRequirements={
|
||||
<ExtensionRequirements bluetoothStandard />
|
||||
<ExtensionRequirements />
|
||||
}
|
||||
/>
|
||||
<OSChooser
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ class GdxFor extends ExtensionLanding {
|
|||
src="/images/gdxfor/gdxfor-header.svg"
|
||||
/>}
|
||||
renderRequirements={
|
||||
<ExtensionRequirements bluetoothStandard />
|
||||
<ExtensionRequirements />
|
||||
}
|
||||
/>
|
||||
<OSChooser
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ class MicroBit extends ExtensionLanding {
|
|||
src="/images/microbit/microbit-heart.png"
|
||||
/>}
|
||||
renderRequirements={
|
||||
<ExtensionRequirements bluetoothStandard />
|
||||
<ExtensionRequirements />
|
||||
}
|
||||
/>
|
||||
<OSChooser
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ class Wedo2 extends ExtensionLanding {
|
|||
/>
|
||||
}
|
||||
renderRequirements={
|
||||
<ExtensionRequirements bluetoothStandard />
|
||||
<ExtensionRequirements />
|
||||
}
|
||||
/>
|
||||
<OSChooser
|
||||
|
|
|
|||
20
static/images/download/scratch-link-illustration.svg
Normal file
20
static/images/download/scratch-link-illustration.svg
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<svg width="336" height="279" viewBox="0 0 336 279" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.5" d="M336 82.3823C336 120.156 300.346 150.774 256.365 150.774C212.383 150.774 176.714 120.156 176.714 82.3823C176.714 30.7828 212.375 0 256.357 0C336 0 336 44.6156 336 82.3823Z" fill="white"/>
|
||||
<path opacity="0.5" d="M166.581 218.29C166.581 251.291 130.928 278.041 86.946 278.041C42.9643 278.041 7.29553 251.291 7.29553 218.29C7.29553 173.21 42.9568 146.316 86.9385 146.316C166.581 146.316 166.581 185.295 166.581 218.29Z" fill="white"/>
|
||||
<path opacity="0.5" d="M153.612 214.644C153.612 240.454 123.108 260.207 90.093 260.207C57.0784 260.207 27.5609 242.786 27.5609 212.741C27.5609 172.939 57.0784 154.017 90.093 154.017C149.868 154.03 153.612 188.84 153.612 214.644Z" fill="white"/>
|
||||
<path d="M157.867 234.268H235.686C240.82 234.268 250.885 233.498 250.885 224.743C250.885 213.8 242.779 214.408 235.686 214.408C230.012 214.408 211.03 214.408 202.249 214.408C195.764 214.408 187.252 211.45 187.252 198.398C187.252 182.186 200.29 181.24 207.315 181.78H274.596C278.649 181.848 285.945 176.957 285.945 171.445C285.945 164.555 279.257 159.083 274.596 159.083C270.867 159.083 205.221 159.083 172.864 159.083C163.407 158.205 144.371 156.206 144.695 130.104C145.019 104.002 169.756 102.273 181.983 102.745H207.315" stroke="white" stroke-width="4.05308" stroke-linecap="round"/>
|
||||
<path d="M203.424 95.9214C199.809 85.8771 198.891 75.0605 200.761 64.5506C202.348 55.5917 205.902 47.0961 211.165 39.675C216.429 32.2539 223.273 26.092 231.203 21.6326C231.82 21.284 232.444 20.9436 233.076 20.6193C246.608 13.6489 262.242 11.9351 276.963 15.8083C278.454 16.2136 279.934 16.6514 281.389 17.1621C293.512 21.37 304.015 29.2646 311.426 39.74C318.838 50.2153 322.788 62.7468 322.722 75.579C322.73 75.7073 322.73 75.8359 322.722 75.9641C322.718 76.037 322.718 76.11 322.722 76.1829C322.695 78.166 322.567 80.1464 322.341 82.1166C321.401 90.4575 318.762 98.5173 314.587 105.799C310.413 113.081 304.79 119.43 298.067 124.455C295.504 126.372 292.794 128.084 289.961 129.574C287.391 130.923 284.729 132.092 281.997 133.072C274.398 135.792 266.338 136.989 258.277 136.595C250.216 136.2 242.312 134.221 235.015 130.771C227.719 127.321 221.174 122.468 215.753 116.489C210.333 110.509 206.143 103.52 203.424 95.9214Z" fill="#47A8D1"/>
|
||||
<path d="M298.067 124.455C298.043 122.618 298.293 120.787 298.809 119.024C302.262 107.27 316.537 102.07 316.537 102.07C312.262 110.902 305.926 118.577 298.063 124.447L298.067 124.455Z" fill="#389438"/>
|
||||
<path d="M253.232 43.7503C250.954 42.9397 252.17 40.3173 252.17 40.3173C254.024 39.0987 255.95 37.9942 257.938 37.01C264.114 33.877 274.555 29.7388 285.661 30.3387C303.251 31.2952 301.277 55.1151 307.361 57.4537C313.444 59.7924 319.115 54.5153 319.115 54.5153C321.545 61.2742 322.765 68.4087 322.718 75.5912C322.313 70.2655 304.224 80.2726 292.393 83.8555C280.307 87.5032 270.332 72.057 274.584 60.8421C278.835 49.6272 259.778 43.8435 255.084 43.9894C254.457 44.0224 253.83 43.9414 253.232 43.7503V43.7503Z" fill="#389438"/>
|
||||
<path d="M203.156 55.2692C208.045 40.9863 218.03 29.0084 231.199 21.6287C236.55 22.3785 242.325 22.9662 246.601 22.8446C257.139 22.5122 257.95 37.0304 257.95 37.0304L255.113 43.9976C254.507 43.8374 253.883 43.7611 253.256 43.7706V43.7706C250.135 43.7058 243.047 44.7393 231.463 52.7239C215.194 63.9387 226.701 44.5164 217.099 52.8009C211.376 57.6889 206.33 56.8053 203.156 55.2692Z" fill="#389438"/>
|
||||
<path d="M203.424 95.9214C212.888 91.5238 228.07 113.414 222.473 103.724C216.876 94.0326 235.933 83.4946 240.035 92.225C244.137 100.955 244.06 109.228 245.742 119.912C247.424 130.595 253.848 124.155 255.275 120.017C256.701 115.879 255.591 108.591 250.318 105.077C245.045 101.563 248.145 102.516 251.817 95.285C255.49 88.0543 268.005 106.39 276.278 111.364C284.55 116.337 298.809 119.024 298.809 119.024L304.572 118.833C302.536 120.854 300.361 122.729 298.063 124.447C295.5 126.364 292.79 128.076 289.957 129.566C287.387 130.915 284.725 132.084 281.993 133.064C266.648 138.557 249.75 137.73 235.016 130.764C220.281 123.799 208.917 111.265 203.424 95.9214V95.9214Z" fill="#389438"/>
|
||||
<path d="M295.854 91.1753C295.854 91.1753 284.704 93.6072 281.985 90.612C279.265 87.6167 279.901 101.353 289.377 97.6521C298.853 93.9517 295.854 91.1753 295.854 91.1753Z" fill="#389438"/>
|
||||
<path d="M251.615 55.3136C251.615 55.3136 246.196 54.2071 243.914 56.8011C241.632 59.3951 247.74 60.4975 251.615 55.3136Z" fill="#389438"/>
|
||||
<path d="M116.288 150.774H5.11225C2.28884 150.774 0 153.063 0 155.887V231.633C0 234.457 2.28884 236.746 5.11225 236.746H116.288C119.111 236.746 121.4 234.457 121.4 231.633V155.887C121.4 153.063 119.111 150.774 116.288 150.774Z" fill="#4C97FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M74.6762 198.132C74.6762 206.162 68.0472 209.48 59.9015 209.48C51.7558 209.48 45.1537 206.135 45.1537 198.132C45.11 196.393 45.448 194.667 46.144 193.073L45.9031 181.475C45.9002 181.187 45.978 180.903 46.1277 180.657C46.2774 180.411 46.4931 180.211 46.7503 180.081C47.0075 179.951 47.2959 179.896 47.583 179.922C47.87 179.947 48.1442 180.052 48.3745 180.226L54.6644 184.883C56.2978 184.105 58.0933 183.729 59.9015 183.785C61.7183 183.729 63.5225 184.105 65.1654 184.883L71.4108 180.226C71.6419 180.053 71.9165 179.949 72.2037 179.924C72.4909 179.899 72.7794 179.954 73.0369 180.084C73.2944 180.213 73.5107 180.412 73.6615 180.658C73.8124 180.904 73.8919 181.186 73.891 181.475L73.6412 193.073C74.3372 194.667 74.6752 196.393 74.6316 198.132" fill="white"/>
|
||||
<path d="M155.972 210.926H97.0879C95.6491 210.926 94.4827 212.092 94.4827 213.531V250.601C94.4827 252.04 95.6491 253.207 97.0879 253.207H155.972C157.411 253.207 158.578 252.04 158.578 250.601V213.531C158.578 212.092 157.411 210.926 155.972 210.926Z" fill="#E7B50C"/>
|
||||
<path d="M154.286 208.437H95.4017C93.9629 208.437 92.7965 209.603 92.7965 211.042V248.112C92.7965 249.551 93.9629 250.717 95.4017 250.717H154.286C155.725 250.717 156.891 249.551 156.891 248.112V211.042C156.891 209.603 155.725 208.437 154.286 208.437Z" fill="#FFC709"/>
|
||||
<path opacity="0.8" d="M153.646 41.7401C154.387 41.5398 155.062 41.1486 155.603 40.6057C156.145 40.0628 156.535 39.3871 156.734 38.6464L157.653 35.2176C157.747 34.8683 157.953 34.5596 158.24 34.3395C158.526 34.1193 158.878 34 159.239 34C159.601 34 159.952 34.1193 160.239 34.3395C160.526 34.5596 160.732 34.8683 160.826 35.2176L161.752 38.6464C161.951 39.3871 162.34 40.0628 162.882 40.6057C163.424 41.1486 164.099 41.5398 164.839 41.7401L168.268 42.6597C168.617 42.7532 168.926 42.9594 169.146 43.2462C169.366 43.533 169.486 43.8845 169.486 44.246C169.486 44.6076 169.366 44.9591 169.146 45.2459C168.926 45.5327 168.617 45.7389 168.268 45.8323L164.839 46.7585C164.099 46.9577 163.425 47.3477 162.883 47.8894C162.341 48.4312 161.951 49.1058 161.752 49.8457L160.826 53.2745C160.732 53.6238 160.526 53.9324 160.239 54.1526C159.952 54.3727 159.601 54.4921 159.239 54.4921C158.878 54.4921 158.526 54.3727 158.24 54.1526C157.953 53.9324 157.747 53.6238 157.653 53.2745L156.734 49.8457C156.534 49.1058 156.144 48.4312 155.603 47.8894C155.061 47.3477 154.386 46.9577 153.646 46.7585L150.218 45.8323C149.868 45.7389 149.56 45.5327 149.339 45.2459C149.119 44.9591 149 44.6076 149 44.246C149 43.8845 149.119 43.533 149.339 43.2462C149.56 42.9594 149.868 42.7532 150.218 42.6597L153.646 41.7401Z" fill="white"/>
|
||||
<path opacity="0.8" d="M124.24 72.5537C125.395 72.243 126.448 71.6339 127.293 70.7876C128.138 69.9414 128.746 68.8877 129.055 67.7324L130.494 62.3856C130.64 61.8421 130.962 61.3621 131.409 61.0198C131.856 60.6775 132.404 60.4921 132.967 60.4921C133.53 60.4921 134.077 60.6775 134.524 61.0198C134.971 61.3621 135.293 61.8421 135.44 62.3856L136.878 67.7324C137.19 68.8876 137.799 69.9408 138.645 70.7869C139.491 71.6329 140.544 72.2422 141.7 72.5537L147.046 73.9922C147.59 74.1391 148.07 74.4609 148.412 74.9079C148.754 75.3549 148.94 75.9023 148.94 76.4653C148.94 77.0283 148.754 77.5756 148.412 78.0227C148.07 78.4697 147.59 78.7915 147.046 78.9383L141.7 80.3637C140.544 80.6753 139.491 81.2845 138.645 82.1306C137.799 82.9766 137.19 84.0298 136.878 85.185L135.44 90.5253C135.293 91.0688 134.971 91.5488 134.524 91.8911C134.077 92.2333 133.53 92.4188 132.967 92.4188C132.404 92.4188 131.856 92.2333 131.409 91.8911C130.962 91.5488 130.64 91.0688 130.494 90.5253L129.055 85.185C128.746 84.0297 128.138 82.9761 127.293 82.1298C126.448 81.2836 125.395 80.6745 124.24 80.3637L118.894 78.9252C118.35 78.7784 117.87 78.4565 117.528 78.0095C117.185 77.5625 117 77.0152 117 76.4522C117 75.8891 117.185 75.3418 117.528 74.8948C117.87 74.4478 118.35 74.1259 118.894 73.9791L124.24 72.5537Z" fill="white"/>
|
||||
<path opacity="0.8" d="M180.667 260.441C181.571 260.198 182.395 259.721 183.057 259.059C183.718 258.396 184.194 257.571 184.436 256.667L185.562 252.482C185.677 252.057 185.929 251.681 186.278 251.413C186.628 251.145 187.057 251 187.497 251C187.938 251 188.367 251.145 188.716 251.413C189.066 251.681 189.318 252.057 189.433 252.482L190.559 256.667C190.803 257.571 191.28 258.396 191.942 259.058C192.604 259.72 193.429 260.197 194.333 260.441L198.518 261.567C198.943 261.682 199.319 261.934 199.587 262.284C199.855 262.633 200 263.062 200 263.503C200 263.943 199.855 264.372 199.587 264.722C199.319 265.071 198.943 265.323 198.518 265.438L194.333 266.554C193.429 266.798 192.604 267.275 191.942 267.937C191.28 268.599 190.803 269.423 190.559 270.328L189.433 274.508C189.318 274.933 189.066 275.309 188.716 275.577C188.367 275.845 187.938 275.99 187.497 275.99C187.057 275.99 186.628 275.845 186.278 275.577C185.929 275.309 185.677 274.933 185.562 274.508L184.436 270.328C184.194 269.423 183.718 268.599 183.057 267.936C182.395 267.274 181.571 266.797 180.667 266.554L176.482 265.428C176.057 265.313 175.681 265.061 175.413 264.711C175.145 264.361 175 263.933 175 263.492C175 263.052 175.145 262.623 175.413 262.273C175.681 261.923 176.057 261.672 176.482 261.557L180.667 260.441Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.7 KiB |
14
static/images/scratchlink/scratch-link-logo.svg
Normal file
14
static/images/scratchlink/scratch-link-logo.svg
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="1024px" height="1024px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Master 1024x1024 </title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Master-1024x1024-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M864,32 C934.692,32 992,89.308 992,160 L992,864 C992,934.692 934.692,992 864,992 L160,992 C89.308,992 32,934.692 32,864 L32,160 C32,89.308 89.308,32 160,32 L864,32 Z" id="bg" fill="#0FBD8C"></path>
|
||||
<path d="M575.040199,579.119317 C575.784506,641.504968 548.860009,701.556404 501.224361,743.740188 C463.313246,777.678653 415.483431,797.175219 365.744307,799.072817 C342.751693,817.796909 314.872542,828.930606 285.019359,830.895376 C281.831783,831.113684 278.644208,831.248027 275.456632,831.248027 C199.197526,831.248027 135.025318,769.433336 129.184126,690.506671 C129.119404,689.599854 129.054682,688.323594 128.989959,686.694681 C128.909056,686.140516 128.844334,685.569557 128.844334,684.948219 C127.35572,651.715056 128.100027,624.258652 129.054682,606.777236 C129.928433,590.656045 130.478573,561.654694 130.543296,554.903945 L130.543296,554.484122 C130.94781,530.890088 136.578655,507.867012 146.820966,487.228529 C143.90846,464.138281 143.973183,439.435915 147.096036,413.524459 L147.500551,409.494161 C147.581454,409.007167 147.581454,408.436208 147.629995,407.949213 C147.710898,407.529391 147.775621,407.042396 147.840343,406.555402 C150.413056,384.506315 154.895079,348.384771 173.891088,311.356411 C205.507955,249.256239 265.48939,212.211086 334.273065,212.211086 L337.185571,212.211086 C358.835196,199.683577 383.18698,193 408.218348,193 L410.871964,193 C490.512813,194.477776 555.299883,262.77453 555.299883,345.294876 C555.299883,346.201693 552.581544,445.195882 549.523413,479.067176 C566.011431,508.992137 574.700406,542.930602 575.040199,579.119317" id="scratch-outline-2" fill="#FFFFFF"></path>
|
||||
<path d="M507.345453,579.495657 C507.895593,620.823002 489.579168,661.243529 457.072369,690.043365 C429.468288,714.762525 394.194609,728.415159 357.901552,728.415159 C351.655846,728.347987 345.345417,727.995336 339.164433,727.138898 C337.740541,729.120461 336.251927,731.018059 334.698591,732.848486 C320.718564,749.255157 301.447484,758.97825 280.412722,760.237718 C278.794663,760.372061 277.225146,760.439233 275.607087,760.439233 C234.556938,760.439233 200.027566,727.071726 196.969435,684.552085 C196.904712,683.712439 196.83999,682.856001 196.83999,681.949184 L196.775268,681.311054 C195.416098,651.033442 196.095683,626.112767 196.904712,610.545742 C197.924089,592.526953 198.474229,561.89669 198.538952,555.280284 C198.878744,534.57463 206.532162,515.783367 218.958852,501.47581 C212.777868,479.309172 210.803837,452.692414 214.606275,421.222506 L215.091692,416.638042 C215.156415,416.285391 215.156415,415.93274 215.221137,415.580089 C217.389336,397.141476 220.641633,369.886588 234.006798,343.840789 C253.957462,304.696522 290.590311,282.227612 334.423521,282.227612 C336.866789,282.227612 339.439503,282.294784 342.093119,282.44592 C346.704586,282.731399 351.380776,283.285565 355.927521,284.142003 C370.166437,270.825228 389.097724,262.57991 409.857417,263.016526 C452.735972,263.789 487.605137,300.531881 487.605137,344.898742 C487.605137,345.872731 483.802699,464.380277 481.974293,474.657537 C480.890193,481.072427 479.061787,487.185045 476.683241,492.961806 C496.423557,516.623012 507.070383,546.12815 507.345453,579.495657" id="scratch-outline-1" fill="#F9A83A"></path>
|
||||
<path d="M336.175207,494.929302 C315.83621,491.637892 304.979036,477.515057 310.367171,433.819912 L310.998214,428.546939 C315.528779,390.578176 319.331216,382.131343 336.935695,383.122125 C342.081122,383.457983 348.019397,386.833357 353.941492,391.888022 C359.442891,398.487635 371.659235,407.035225 378.535984,423.962475 C383.471063,436.389227 385.170025,444.500201 385.88197,453.21572 L386.96607,463.912802 L386.96607,463.862423 C388.422323,471.184131 393.826639,477.195992 401.30207,478.505838 C410.929519,480.336265 420.217176,473.686274 421.899957,463.694494 C422.126485,462.502198 426.479063,347.420404 426.479063,345.539598 C426.479063,335.396682 418.647659,327.168158 408.809862,327.000229 C399.004426,326.94985 391.043578,335.228753 391.043578,345.338083 C391.043578,345.556391 390.995036,361.442482 390.671424,377.462915 C376.691397,361.677582 358.795668,347.537954 338.764101,346.312072 C285.141636,343.339728 279.284264,394.507716 275.756896,423.996061 L275.222937,429.218655 C267.990214,487.490044 286.727334,524.249718 330.72235,531.386703 C378.535984,539.178612 410.460282,550.580996 410.751532,581.110502 C410.929519,592.983087 404.910341,605.157945 394.40914,614.528387 C381.755921,625.695671 364.831027,630.71675 348.876968,627.996299 C343.925709,627.207032 339.28188,625.796428 334.832219,624.268274 C328.570332,620.641006 312.794259,610.682812 304.784869,599.17967 C298.037564,589.47337 295.691379,574.22541 294.963253,564.552695 C295.044156,560.220125 295.060336,557.348538 295.060336,557.029473 C295.238323,546.836178 287.358377,538.540482 277.650025,538.305381 C267.796047,538.07028 259.705754,546.298805 259.527767,556.475307 C259.527767,556.811165 259.090891,592.865537 257.812625,614.578766 C255.984219,649.558392 257.812625,679.18108 257.812625,680.474134 C258.540751,690.633843 266.954657,698.291409 276.760092,697.619693 C286.533167,697.08232 293.976237,688.282836 293.296652,678.106334 C293.296652,677.938405 292.4229,663.58047 292.536165,643.748046 C305.545356,652.362808 322.632056,660.742468 342.971054,664.33615 C369.507216,668.9542 396.642061,660.994362 417.369393,642.505371 C435.928526,626.031529 446.559171,603.51224 446.267921,580.724265 C445.636878,512.696198 371.659235,500.739648 336.175207,494.929302" id="scratch-fill" fill="#FFFFFF"></path>
|
||||
<path d="M779.06356,762 C774.622648,762 770.327887,760.232486 767.091541,756.9623 C760.463197,750.216229 760.493012,739.265542 767.164319,732.573091 C825.831943,673.602502 858.131554,595.271768 858.131554,512.008111 C858.131554,428.736438 825.837379,350.418889 767.168472,291.43153 C760.491766,284.733659 760.461915,273.777012 767.091595,267.053866 C773.685978,260.342534 784.355971,260.312853 790.978619,266.980568 C856.109373,332.454236 892,419.492628 892,512.008111 C892,604.509927 856.107892,691.547704 790.974256,757.024264 C787.755641,760.253082 783.483577,762 779.06356,762 Z M718.103479,684.394903 C713.646999,684.394903 709.350112,682.632852 706.13146,679.357203 C699.503117,672.611133 699.53293,661.676216 706.203319,654.984689 C744.245892,616.728832 765.175937,565.977155 765.175937,512.009688 C765.175937,458.028454 744.247305,407.276194 706.208391,369.024011 C699.53293,362.327389 699.503117,351.392472 706.13146,344.646402 C712.710213,337.950802 723.395834,337.921079 730.003105,344.573224 C774.499695,389.307818 799.028775,448.794707 799.028775,512.009688 C799.028775,575.213322 774.496547,634.69936 730.013648,679.403984 C726.808089,682.643006 722.530133,684.394903 718.103479,684.394903 Z M656.923332,606.581635 C652.482419,606.581635 648.187659,604.814121 644.951312,601.543935 C638.322969,594.797865 638.352782,583.862948 645.022003,577.172595 C662.37045,559.717134 671.906607,536.594539 671.906607,512.008111 C671.906607,487.406332 662.370826,464.284648 645.020683,446.842297 C638.354008,440.130259 638.324233,429.2013 644.951312,422.456516 C651.534978,415.755916 662.22635,415.733611 668.820535,422.396675 C692.628442,446.304212 705.759445,478.158031 705.759445,512.008111 C705.759445,545.844592 692.626914,577.697773 668.8335,601.590716 C665.627941,604.829738 661.349985,606.581635 656.923332,606.581635 Z" id="signal" fill="#FFFFFF" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.7 KiB |
29
test/unit/components/extension-requirements.test.jsx
Normal file
29
test/unit/components/extension-requirements.test.jsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import React from 'react';
|
||||
import {mountWithIntl} from '../../helpers/intl-helpers.jsx';
|
||||
import ExtensionRequirements from '../../../src/components/extension-landing/extension-requirements';
|
||||
|
||||
describe('ExtensionRequirements', () => {
|
||||
|
||||
test('shows default extension requirements', () => {
|
||||
const component = mountWithIntl(<ExtensionRequirements />);
|
||||
|
||||
const requirements = component.find('.extension-requirements span').map(span => span.text());
|
||||
|
||||
expect(requirements).toEqual(
|
||||
['Windows 10 version 1709+', 'macOS 10.13+', 'ChromeOS', 'Android 6.0+', 'Bluetooth', 'Scratch Link']
|
||||
);
|
||||
});
|
||||
|
||||
test('hides requirements', () => {
|
||||
const component = mountWithIntl(<ExtensionRequirements
|
||||
hideWindows
|
||||
hideMac
|
||||
hideChromeOS
|
||||
hideAndroid
|
||||
hideBluetooth
|
||||
hideScratchLink
|
||||
/>);
|
||||
|
||||
expect(component.find('.extension-requirements span').length).toEqual(0);
|
||||
});
|
||||
});
|
||||
32
test/unit/components/os-chooser.test.jsx
Normal file
32
test/unit/components/os-chooser.test.jsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import React from 'react';
|
||||
import {mountWithIntl} from '../../helpers/intl-helpers.jsx';
|
||||
import OSChooser from '../../../src/components/os-chooser/os-chooser';
|
||||
|
||||
describe('OSChooser', () => {
|
||||
test('calls callback when OS is selected', () => {
|
||||
const onSetOs = jest.fn();
|
||||
const component = mountWithIntl(<OSChooser handleSetOS={onSetOs} />);
|
||||
|
||||
component.find('button').last()
|
||||
.simulate('click');
|
||||
|
||||
expect(onSetOs).toBeCalledWith('Android');
|
||||
});
|
||||
|
||||
test('has all 4 operating systems', () => {
|
||||
const component = mountWithIntl(<OSChooser />);
|
||||
|
||||
expect(component.find('button').length).toEqual(4);
|
||||
});
|
||||
|
||||
test('hides operating systems', () => {
|
||||
const component = mountWithIntl(<OSChooser
|
||||
hideWindows
|
||||
hideMac
|
||||
hideChromeOS
|
||||
hideAndroid
|
||||
/>);
|
||||
|
||||
expect(component.find('button').length).toEqual(0);
|
||||
});
|
||||
});
|
||||
Loading…
Reference in a new issue