From 69065e129b80d52c3817602abf97adbd1a3bace2 Mon Sep 17 00:00:00 2001 From: Karishma Chadha Date: Tue, 7 Jun 2022 18:25:32 -0400 Subject: [PATCH] feat: Create landing page for Scratch Link download (ENA-69) --- .../extension-landing/extension-landing.scss | 42 ++++- .../extension-requirements.jsx | 111 +++++++------ .../extension-landing/hardware-card.jsx | 32 ++++ src/components/os-chooser/os-chooser.jsx | 93 ++++++----- src/routes.json | 13 ++ src/views/boost/boost.jsx | 2 +- src/views/download/scratch-link/download.jsx | 149 ++++++++++++++++++ src/views/download/scratch-link/download.scss | 7 + src/views/download/scratch-link/l10n.json | 24 +++ src/views/ev3/ev3.jsx | 2 +- src/views/gdxfor/gdxfor.jsx | 2 +- src/views/microbit/microbit.jsx | 2 +- src/views/wedo2/wedo2.jsx | 2 +- .../images/scratchlink/scratch-link-logo.svg | 14 ++ 14 files changed, 404 insertions(+), 91 deletions(-) create mode 100644 src/components/extension-landing/hardware-card.jsx create mode 100644 src/views/download/scratch-link/download.jsx create mode 100644 src/views/download/scratch-link/download.scss create mode 100644 src/views/download/scratch-link/l10n.json create mode 100644 static/images/scratchlink/scratch-link-logo.svg diff --git a/src/components/extension-landing/extension-landing.scss b/src/components/extension-landing/extension-landing.scss index f4f4fbfcf..a9182d592 100644 --- a/src/components/extension-landing/extension-landing.scss +++ b/src/components/extension-landing/extension-landing.scss @@ -258,7 +258,47 @@ } } - div.cards + div.faq { + .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; } diff --git a/src/components/extension-landing/extension-requirements.jsx b/src/components/extension-landing/extension-requirements.jsx index efe498921..8348767c3 100644 --- a/src/components/extension-landing/extension-requirements.jsx +++ b/src/components/extension-landing/extension-requirements.jsx @@ -12,62 +12,77 @@ const ExtensionRequirements = props => ( - {props.bluetoothStandard ? ( - - - - Windows 10 version 1709+ - - - - macOS 10.13+ - - - - - ChromeOS - - - - Android 6.0+ - - - - - Bluetooth - - - - Scratch Link - - - ) : props.children} + {!props.hideWindows && ( + + + Windows 10 version 1709+ + + )} + {!props.hideMac && ( + + + macOS 10.13+ + + )} + {!props.hideChromeOS && ( + + + ChromeOS + + )} + {!props.hideAndroid && ( + + + Android 6.0+ + + )} + {!props.hideBluetooth && ( + + + Bluetooth + + )} + {!props.hideScratchLink && ( + + + Scratch Link + + )} ); 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; diff --git a/src/components/extension-landing/hardware-card.jsx b/src/components/extension-landing/hardware-card.jsx new file mode 100644 index 000000000..d3f250e1a --- /dev/null +++ b/src/components/extension-landing/hardware-card.jsx @@ -0,0 +1,32 @@ +const PropTypes = require('prop-types'); +const React = require('react'); + +const HardwareCard = props => ( + +
+ {props.imageAlt} +
+
+

{props.title}

+

{props.description}

+
+ +); + +HardwareCard.propTypes = { + cardUrl: PropTypes.string, + description: PropTypes.string, + imageAlt: PropTypes.string, + imageSrc: PropTypes.string, + title: PropTypes.string +}; + +module.exports = HardwareCard; diff --git a/src/components/os-chooser/os-chooser.jsx b/src/components/os-chooser/os-chooser.jsx index c2821080a..b3ba27fe8 100644 --- a/src/components/os-chooser/os-chooser.jsx +++ b/src/components/os-chooser/os-chooser.jsx @@ -15,49 +15,68 @@ const OSChooser = props => (
- - - - + {!props.hideWindows && ( + + )} + {!props.hideMac && ( + + )} + {!props.hideChromeOS && ( + + )} + {!props.hideAndroid && ( + + )}
); 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); diff --git a/src/routes.json b/src/routes.json index 560430aaf..a780f20cb 100644 --- a/src/routes.json +++ b/src/routes.json @@ -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/?$", diff --git a/src/views/boost/boost.jsx b/src/views/boost/boost.jsx index b96565a4d..87c70c0e0 100644 --- a/src/views/boost/boost.jsx +++ b/src/views/boost/boost.jsx @@ -59,7 +59,7 @@ class Boost extends ExtensionLanding { src="/images/boost/boost-header.svg" />} renderRequirements={ - + } /> { + const [os, setOS] = useState(detectOS()); + + return ( +
+ +

{intl.formatMessage({{intl.formatMessage({ id: "scratchLink.headerTitle" })}

+ + + } + renderImage={ + + } + renderRequirements={ + + } + /> + + {(isDownloaded(os)) && ( + + )} + +

+

+
+ + + + + +
+ + + {isDownloaded(os) && ( + +

+

+ + + + ), + macOSVersionLink: ( + + + + ) + }} + /> +

+

+ + )} +

+

+ +

+ +
+ ); +}; + +ScratchLink.propTypes = { + intl: intlShape.isRequired +}; + +const WrappedScratchLink = injectIntl(ScratchLink); + +render(, document.getElementById('app')); diff --git a/src/views/download/scratch-link/download.scss b/src/views/download/scratch-link/download.scss new file mode 100644 index 000000000..965841d5a --- /dev/null +++ b/src/views/download/scratch-link/download.scss @@ -0,0 +1,7 @@ +@import "../../../colors"; + +.link { + .extension-header { + background-color: $ui-aqua; + } +} diff --git a/src/views/download/scratch-link/l10n.json b/src/views/download/scratch-link/l10n.json new file mode 100644 index 000000000..0d2ac3b18 --- /dev/null +++ b/src/views/download/scratch-link/l10n.json @@ -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." +} diff --git a/src/views/ev3/ev3.jsx b/src/views/ev3/ev3.jsx index 1ccb98b25..8c08a30c4 100644 --- a/src/views/ev3/ev3.jsx +++ b/src/views/ev3/ev3.jsx @@ -63,7 +63,7 @@ class EV3 extends ExtensionLanding { videoId="0huu6wfiki" />} renderRequirements={ - + } /> } renderRequirements={ - + } /> } renderRequirements={ - + } /> } renderRequirements={ - + } /> + + + Master 1024x1024 + Created with Sketch. + + + + + + + + + \ No newline at end of file