mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-12-12 08:41:31 -05:00
de2691762e
* Add extension-landing generalized styles, install scratch link component * Make EV3 page use generalized stuff * Use OS_ENUM file instead of class variable * use extension-landing/os-enum in os chooser * Use extension-landing class in extension-landing.scss * Use extension-landing styles and components on microbit page * Add view-specific styles * Move install scratch link l10n strings to src/l10n.json * Start moving steps display to its own components * Finish initial pass at Step, Steps components for extension landing pages * Create ProjectCard component * Use new components on InstallScratchLInk component * Use new components on EV3 page * allow className prop in Steps component * Use new components on micro:bit landing page * imageUrl -> imageSrc in ProjectCard * Create ExtensionHeader component and use it on micro:bit and EV3 pages * Fix a spacing issue in the InstallScratchLink component * Add ExtensionRequirements component * Use ExtensionRequirements component on landing pages * Remove requirements l10n string for ev3 page * Move project card styles out of things-to-try section * Don't render the number row in a step if compact and number props are not set * Add ExtensionSection component * Use ExtensionSection on ev3 and microbit pages * Move state configuration to ExtensionLanding class * Move tip box, screenshot styles outside of specific section * Add TipBox component and use it on the EV3 page * Use hr element instead of section-separator div * Remove refactor TODO comments :)
48 lines
1.5 KiB
JavaScript
48 lines
1.5 KiB
JavaScript
const classNames = require('classnames');
|
|
const injectIntl = require('react-intl').injectIntl;
|
|
const FormattedMessage = require('react-intl').FormattedMessage;
|
|
const PropTypes = require('prop-types');
|
|
const React = require('react');
|
|
|
|
|
|
const FlexRow = require('../../components/flex-row/flex-row.jsx');
|
|
const Button = require('../../components/forms/button.jsx');
|
|
|
|
const OS_ENUM = require('../../components/extension-landing/os-enum.js');
|
|
|
|
require('./os-chooser.scss');
|
|
|
|
const OSChooser = props => (
|
|
<div className="os-chooser">
|
|
<FlexRow className="inner">
|
|
<FormattedMessage id="oschooser.choose" />
|
|
<Button
|
|
className={classNames({active: props.currentOS === OS_ENUM.WINDOWS})}
|
|
onClick={() => // eslint-disable-line react/jsx-no-bind
|
|
props.handleSetOS(OS_ENUM.WINDOWS)
|
|
}
|
|
>
|
|
<img src="/svgs/extensions/windows.svg" />
|
|
Windows
|
|
</Button>
|
|
<Button
|
|
className={classNames({active: props.currentOS === OS_ENUM.MACOS})}
|
|
onClick={() => // eslint-disable-line react/jsx-no-bind
|
|
props.handleSetOS(OS_ENUM.MACOS)
|
|
}
|
|
>
|
|
<img src="/svgs/extensions/mac.svg" />
|
|
macOS
|
|
</Button>
|
|
</FlexRow>
|
|
</div>
|
|
);
|
|
|
|
OSChooser.propTypes = {
|
|
currentOS: PropTypes.string,
|
|
handleSetOS: PropTypes.func
|
|
};
|
|
|
|
const wrappedOSChooser = injectIntl(OSChooser);
|
|
|
|
module.exports = wrappedOSChooser;
|