Skip to content

Instantly share code, notes, and snippets.

@clindsey

clindsey/design-elements-1-0-0.markdown

Last active November 18, 2016 01:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save clindsey/32105897e90ac83fd18eefb951691aa9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save clindsey/32105897e90ac83fd18eefb951691aa9 to your computer and use it in GitHub Desktop.
Download ZIP
design-elements-1.0.0
Raw
index.html
<div id="js-app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script>
<script src="https://fb.me/react-dom-15.0.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.min.js"></script>
<script src="http://codepen.io/clindsey/pen/QGKRZM.js"></script> <!-- parseForm-1.0.0 -->
<script src="http://codepen.io/clindsey/pen/ObRYEX.js"></script> <!-- c-form-field-1.0.0 -->
<script src="http://codepen.io/clindsey/pen/QGKXeo.js"></script> <!-- c-form-button-1.0.0 -->
<script src="http://codepen.io/clindsey/pen/LbbeVx.js"></script> <!-- c-form-button-1.0.0 -->
<script>
const formRadioPermutations = [
{ // begin default
name: 'widgetType0A',
options: [
{
label: 'Lorem',
value: '0'
}, {
label: 'Ipsum',
value: '1'
}, {
label: 'Dolor',
value: '2'
}
],
value: '1'
}, {
hint: 'Select a type',
name: 'widgetType1A',
options: [
{
label: 'Lorem',
value: '0'
}, {
label: 'Ipsum',
value: '1'
}, {
label: 'Dolor',
value: '2'
}
],
value: ''
}, {
error: 'Type is required',
hint: 'Select a type',
name: 'widgetType2A',
options: [
{
label: 'Lorem',
value: '0'
}, {
label: 'Ipsum',
value: '1'
}, {
label: 'Dolor',
value: '2'
}
],
value: ''
}, { // end default
name: 'widgetType0B',
options: [
{
label: 'Lorem',
icon: 'http://s.cdpn.io/3/kiwi.svg',
value: '0'
}, {
label: 'Ipsum',
icon: 'http://s.cdpn.io/3/kiwi.svg',
value: '1'
}, {
label: 'Dolor',
icon: 'http://s.cdpn.io/3/kiwi.svg',
value: '2'
}
],
value: '1'
}, {
hint: 'Select a type',
name: 'widgetType1B',
options: [
{
label: 'Lorem',
icon: 'http://s.cdpn.io/3/kiwi.svg',
value: '0'
}, {
label: 'Ipsum',
icon: 'http://s.cdpn.io/3/kiwi.svg',
value: '1'
}, {
label: 'Dolor',
icon: 'http://s.cdpn.io/3/kiwi.svg',
value: '2'
}
],
value: ''
}, {
error: 'Type is required',
hint: 'Select a type',
name: 'widgetType2B',
options: [
{
label: 'Lorem',
icon: 'http://s.cdpn.io/3/kiwi.svg',
value: '0'
}, {
label: 'Ipsum',
icon: 'http://s.cdpn.io/3/kiwi.svg',
value: '1'
}, {
label: 'Dolor',
icon: 'http://s.cdpn.io/3/kiwi.svg',
value: '2'
}
],
value: ''
} // end icon
];
const buttonPermutations = [
{
className: 'c-form-button--primary c-form-button--block',
label: 'Next',
type: 'button'
}, {
className: 'c-form-button--alternate c-form-button--block',
label: 'Cancel',
type: 'button'
}, {
className: 'c-form-button--destructive c-form-button--block',
label: 'Remove',
type: 'button'
}, {
className: 'c-form-button--primary c-form-button--inverse c-form-button--block',
label: 'Title',
type: 'button'
}, {
className: 'c-form-button--primary c-form-button--disabled c-form-button--block',
disabled: true,
label: 'Save',
type: 'button'
}
];
const formFieldPermutations = [
{ // begin default
fields: [
{
name: 'alpha',
placeholder: 'Placeholder',
type: 'text'
}
]
}, {
fields: [
{
name: 'bravo',
placeholder: 'Placeholder',
value: 'Value',
type: 'text'
}
]
}, {
fields: [
{
name: 'charlie',
placeholder: 'Hint',
type: 'text'
}
],
hint: 'Helper text'
}, {
error: 'Error message',
fields: [
{
name: 'delta',
placeholder: 'Error',
type: 'text'
}
]
}, { // end default
fields: [ // begin no-icons
{
name: 'alpha',
placeholder: 'Placeholder',
type: 'text'
}
],
icon: 'http://s.cdpn.io/3/kiwi.svg'
}, {
fields: [
{
name: 'bravo',
placeholder: 'Default',
value: 'Value',
type: 'text'
}
],
icon: 'http://s.cdpn.io/3/kiwi.svg'
}, {
fields: [
{
name: 'charlie',
placeholder: 'Hint',
type: 'text'
}
],
hint: 'Helper text',
icon: 'http://s.cdpn.io/3/kiwi.svg'
}, {
error: 'Error message',
fields: [
{
name: 'delta',
placeholder: 'Error',
type: 'text'
}
],
icon: 'http://s.cdpn.io/3/kiwi.svg'
}, { // end no-icons
fields: [ // begin credit card
{
className: 'u-1/3',
name: 'expirationDate',
placeholder: 'mm / yy',
type: 'text'
}, {
className: 'u-1/3',
name: 'securityCode',
placeholder: 'cvv',
type: 'text'
}, {
className: 'u-1/3',
name: 'zipCode',
placeholder: 'zip',
type: 'text'
}
],
icon: 'http://s.cdpn.io/3/kiwi.svg'
}, {
fields: [
{
className: 'u-1/3',
name: 'expirationDate',
placeholder: 'mm / yy',
value: '09 / 10',
type: 'text'
}, {
className: 'u-1/3',
name: 'securityCode',
placeholder: 'cvv',
value: '123',
type: 'text'
}, {
className: 'u-1/3',
name: 'zipCode',
placeholder: 'zip',
value: '94107',
type: 'text'
}
],
icon: 'http://s.cdpn.io/3/kiwi.svg'
}, {
fields: [
{
className: 'u-1/3',
name: 'expirationDate',
placeholder: 'mm / yy',
type: 'text'
}, {
className: 'u-1/3',
name: 'securityCode',
placeholder: 'cvv',
type: 'text'
}, {
className: 'u-1/3',
name: 'zipCode',
placeholder: 'zip',
type: 'text'
}
],
hint: 'Credit card hint',
icon: 'http://s.cdpn.io/3/kiwi.svg'
}, {
error: 'Error for credit card',
fields: [
{
className: 'u-1/3',
name: 'expirationDate',
placeholder: 'mm / yy',
type: 'text'
}, {
className: 'u-1/3',
name: 'securityCode',
placeholder: 'cvv',
type: 'text'
}, {
className: 'u-1/3',
name: 'zipCode',
placeholder: 'zip',
type: 'text'
}
],
icon: 'http://s.cdpn.io/3/kiwi.svg'
}, { // end credit card
fields: [ // begin password
{
name: 'password',
placeholder: 'Password',
type: 'password'
}
],
icon: 'http://s.cdpn.io/3/kiwi.svg'
}, {
fields: [
{
name: 'password',
placeholder: 'Password',
value: 'password123',
type: 'password'
}
],
icon: 'http://s.cdpn.io/3/kiwi.svg'
}, {
fields: [
{
name: 'password',
placeholder: 'Password',
type: 'password'
}
],
hint: 'Password',
icon: 'http://s.cdpn.io/3/kiwi.svg'
}, {
error: 'Password required',
fields: [
{
name: 'password',
placeholder: 'Password',
type: 'password'
}
],
icon: 'http://s.cdpn.io/3/kiwi.svg'
}, { // end password
fields: [ // begin location
{
className: 'u-3/4',
name: 'location',
placeholder: 'Address',
type: 'text'
}, {
className: 'u-1/4',
name: 'apartment',
placeholder: 'Apt',
type: 'text'
}
],
icon: 'http://s.cdpn.io/3/kiwi.svg'
}, {
fields: [
{
className: 'u-3/4',
name: 'location',
placeholder: 'Address',
type: 'text',
value: '123 Fake St'
}, {
className: 'u-1/4',
name: 'apartment',
placeholder: 'Apt',
type: 'text',
value: '106'
}
],
icon: 'http://s.cdpn.io/3/kiwi.svg'
}, {
fields: [
{
className: 'u-3/4',
name: 'location',
placeholder: 'Address',
type: 'text'
}, {
className: 'u-1/4',
name: 'apartment',
placeholder: 'Apt',
type: 'text'
}
],
hint: 'Enter a location',
icon: 'http://s.cdpn.io/3/kiwi.svg'
}, {
error: 'Location required',
fields: [
{
className: 'u-3/4',
name: 'location',
placeholder: 'Address',
type: 'text'
}, {
className: 'u-1/4',
name: 'apartment',
placeholder: 'Apt',
type: 'text'
}
],
icon: 'http://s.cdpn.io/3/kiwi.svg'
} // end location
];
</script>
Raw
script.babel
setTimeout(() => {
ReactDOM.render(
<Workshop />
, document.getElementById('js-app'));
}, 0);
class Workshop extends React.Component {
state = {
debug: false
};
handleClick () {
return () => {
this.setState({debug: !this.state.debug});
};
}
handleSubmit () {
return (e) => {
e.preventDefault();
console.log('!!!!!!', 'form submit', parseForm(e.target));
};
}
render () {
const className = classNames({
'o-wrapper': true,
'debug': this.state.debug
});
return (
<div {...{className}}>
<div className="o-layout">
<div className="c-control-bar o-layout__item u-1/1">
<label>
<input
checked={this.state.debug}
onClick={this.handleClick()}
type="checkbox"
/> {'Debug'}
</label>
</div>
</div>
<div className="o-layout">
<div className="o-layout__item u-1/1">
<h1>{'FormRadio'}</h1>
</div>
{formRadioPermutations.map(fields => (
<div className="o-layout__item u-1/1 u-1/2@tablet u-1/3@desktop">
<form onSubmit={this.handleSubmit()}>
<FormRadio {...fields} />
<input
style={{display: 'none'}}
type="submit"
/>
</form>
</div>
))}
</div>
<div className="o-layout">
<div className="o-layout__item u-1/1">
<h1>{'FormField'}</h1>
</div>
{formFieldPermutations.map(fields => (
<div className="o-layout__item u-1/1 u-1/2@tablet u-1/4@desktop">
<form onSubmit={this.handleSubmit()}>
<FormField {...fields} />
<input
style={{display: 'none'}}
type="submit"
/>
</form>
</div>
))}
</div>
<div className="o-layout">
<div className="o-layout__item u-1/1">
<h1>{'FormButton'}</h1>
</div>
{buttonPermutations.map(fields => (
<div className="o-layout__item u-1/1 u-1/2@tablet u-1/4@desktop">
<FormButton {...fields} />
</div>
))}
</div>
</div>
);
}
}
Raw
style.scss
$debug-color: #0ff;
body {
color: $text-base-color;
font-family: 'Open Sans', sans-serif;
margin-top: $inuit-global-spacing-unit;
}
.debug {
.c-form-field,
.o-media__body,
.c-form-radio {
box-shadow:
-1px 0 0 $debug-color,
0 -1px 0 $debug-color,
0 1px 0 $debug-color,
1px 0 0 $debug-color;
}
}
.c-control-bar {
margin-bottom: $inuit-global-spacing-unit;
}
Raw
styles
<link href="http://codepen.io/clindsey/pen/XNKwXY" rel="stylesheet" />
<link href="http://codepen.io/clindsey/pen/jVMoKL" rel="stylesheet" />
<link href="http://codepen.io/clindsey/pen/ObRYEX" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,600" rel="stylesheet" />
<link href="http://codepen.io/clindsey/pen/QGKXeo" rel="stylesheet" />
<link href="http://codepen.io/clindsey/pen/LbbeVx" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment