scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-03-31 15:21:34 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
Ray Schamp 2016-03-29 10:07:23 -04:00
parent a080b2b64f
commit 144d6e3754
7 changed files with 279 additions and 72 deletions
src
components
formcard
formcard.jsxformcard.scss
formset
formset.jsxformset.scss
stepnavigation
stepnavigation.jsx
routes.json
views/teacherregistration
teacherregistration.jsx

55
src/components/formcard/formcard.jsx
View file

@ -1,55 +0,0 @@
var React = require('react');
var classNames = require('classnames');
require('./formcard.scss');
var CounterIndicator = React.createClass({
type: 'CounterIndicator',
propTypes: {
selected: false,
active: false
},
render: function () {
var classes = classNames(
'counterIndicator',
{
'selected': this.props.selected,
'active': this.props.selected
},
this.props.className
);
return (
<div {... this.props} className={classes} />
);
}
})
var FormCard = React.createClass({
type: 'FormCard',
propTypes: {
},
render: function () {
var classes = classNames(
'formcard',
this.props.className
);
return (
<div {... this.props} className={classes} >
<img className="icon" src={this.props.icon} />
<p className="description">
{this.props.description}
</p>
<div className="counter">
{for (var i = 0; i < this.props.counterMax; i++) {
<CounterIndicator selected={i === this.props.step} active={i < this.props.step} />
}}
</div>
{this.props.children}
</div>
);
}
});
module.exports = FormCard;

17
src/components/formcard/formcard.scss
View file

@ -1,17 +0,0 @@
@import "colors";
.counterindicator {
display: inline-block;
&.active {
background-color: $ui-blue;
}
&.selected {
border: 2px solid $ui-blue;
}
}
.formcard {
width: 100px;
}

85
src/components/formset/formset.jsx Normal file
View file

@ -0,0 +1,85 @@
var React = require('react');
var classNames = require('classnames');
var StepNavigationComponents = require('../stepnavigation/stepnavigation.jsx');
var StepNavigation = StepNavigationComponents.StepNavigation;
var StepNavigationIndicator = StepNavigationComponents.StepNavigationIndicator;
require('./formset.scss');
module.exports = {
FormStep: React.createClass({
type: 'FormStep',
propTypes: {
},
getDefaultProps: function () {
return {
navigation: null
}
},
render: function () {
var classes = classNames(
'step',
this.props.className
);
return (
<div {... this.props} className={classes}>
<img className="icon" src={this.props.icon} />
{this.props.description}
{this.props.navigation}
{this.props.children}
</div>
);
}
}),
FormSet: React.createClass({
type: 'FormSet',
propTypes: {
step: function(props, propName, componentName) {
var stepValidator = function (props, propName) {
if (props[propName] > -1 && props[propName] < props.children.length) {
return null;
} else {
return new Error('Prop `step` out of range');
}
}
return (
React.PropTypes.number.isRequired(props, propName, componentName) ||
stepValidator(props, propName, componentName)
);
}
},
getDefaultProps: function () {
return {
step: 0
};
},
render: function () {
var classes = classNames(
'formset',
this.props.className
);
var navigation = (
<StepNavigation>
{this.props.children.map(function (child, id) {
return (
<StepNavigationIndicator key={id}
active={id <= this.props.step}
selected={id === this.props.step} />
);
}.bind(this))}
</StepNavigation>);
return (
<div {... this.props} className={classes}>
{this.props.children.map(function (child, id) {
if (id === this.props.step) {
return child;
}
}.bind(this))}
</div>
);
}
})
};

15
src/components/formset/formset.scss Normal file
View file

@ -0,0 +1,15 @@
@import "../../colors";
.formset {
.counterindicator {
display: inline-block;
&.active {
background-color: $ui-blue;
}
&.selected {
border: 2px solid $ui-blue;
}
}
}

44
src/components/stepnavigation/stepnavigation.jsx Normal file
View file

@ -0,0 +1,44 @@
var classNames = require('classnames');
var React = require('react');
module.exports = {
StepNavigationIndicator: React.createClass({
type: 'StepNavigationIndicator',
propTypes: {
selected: React.PropTypes.bool,
active: React.PropTypes.bool
},
getDefaultProps: function () {
return {
selected: false,
active: false
};
},
render: function () {
var classes = classNames(
'indicator',
{
'selected': this.props.selected,
'active': this.props.selected
},
this.props.className
);
return (
<li {... this.props} className={classes} />
);
}
}),
StepNavigation: React.createClass({
type: 'Navigation',
render: function () {
var classes = classNames(
'step-navigation',
this.props.className);
return (
<ul className={classes}>
{this.props.children}
</ul>
);
}
})
};

6
src/routes.json
View file

@ -67,6 +67,12 @@
"view": "jobs/jobs",
"title": "Jobs"
},
{
"name": "teacherregistration",
"pattern": "^/register-teacher/?$",
"view": "teacherregistration/teacherregistration",
"title": "Teacher Registration"
},
{
"name": "wedo2",
"pattern": "^/wedo/?$",

129
src/views/teacherregistration/teacherregistration.jsx Normal file
View file

@ -0,0 +1,129 @@
var classNames = require('classnames');
var React = require('react');
var render = require('../../lib/render.jsx');
var formset = require('../../components/formset/formset.jsx');
var FormSet = formset.FormSet;
var FormStep = formset.FormStep;
var Page = require('../../components/page/www/page.jsx');
var TeacherRegistration = React.createClass({
type: 'TeacherRegistration',
getInitialState: function () {
return {
step: 0
}
},
setStep: function (step) {
this.setState({step: step});
},
render: function () {
var classes = classNames(
'teacher-registration',
this.props.className);
return (
<FormSet {... this.props}
className={classes}
step={this.state.step}
onSetStep={this.setStep}>
<FormStep title="Create a Teacher Account"
description={
<p>
Creating a Teacher Account requires additional information
for review.
<strong>The approval process can take up to 24 hours</strong>
</p>}
key="step1">
<form>
<label htmlFor="username">Username</label>
<input type="text" name="username" />
<label htmlFor="password">Password</label>
<input type="password" name="password" />
<label htmlFor="passwordConfirmation">Confirm Password</label>
<input type="password" name="passwordConfirmation" />
</form>
</FormStep>
<FormStep title="Demographics"
description={
<p>
Your responses to these questions will be kept private.
Why do we ask for this information <a onClick={this.handle}>?</a>
</p>}
key="step2">
<form>
Lipsum
</form>
</FormStep>
<FormStep title="First &amp; Last Name"
description={
<p>
Your responses to these questions will be kept private.
Why do we ask for this information <a onClick={this.handle}>?</a>
</p>}
key="step3">
<form>
Lipsum
</form>
</FormStep>
<FormStep title="Phone Number"
description={
<p>
Your responses to these questions will be kept private.
Why do we ask for this information <a onClick={this.handle}>?</a>
</p>}
key="step4">
<form>
Lipsum
</form>
</FormStep>
<FormStep title="Organization"
description={
<p>
Your responses to these questions will be kept private.
Why do we ask for this information <a onClick={this.handle}>?</a>
</p>}
key="step5">
<form>
Lipsum
</form>
</FormStep>
<FormStep title="Address"
description={
<p>
Your responses to these questions will be kept private.
Why do we ask for this information <a onClick={this.handle}>?</a>
</p>}
key="step6">
<form>
Lipsum
</form>
</FormStep>
<FormStep title="How do you use Scratch?"
description={
<p>
Tell us a little how you plan to use Scratch.
Why do we ask for this information <a onClick={this.handle}>?</a>
</p>}
key="step7">
<form>
Lipsum
</form>
</FormStep>
<FormStep title="Email Address"
description={
<p>
We will send you a <strong>confirmation email</strong> that will
allow you to access your Scratch Teacher Account.
</p>}
key="step8">
<form>
Lipsum
</form>
</FormStep>
</FormSet>
);
}
});
render(<Page><TeacherRegistration /></Page>, document.getElementById('app'));