essence-templates
Version:
React Essence Templates - based on Essence Material Design Framework
757 lines (687 loc) • 27 kB
JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
import ClassNames from 'classnames';
import Tab from 'essence-tab';
import Btn from 'essence-button';
import {Block, Divider, Text} from 'essence-core';
import {Card, CardHeader, CardContent, CardFooter} from 'essence-card';
class AppCoreGridSystem extends React.Component {
constructor(props) {
super(props);
this.state = {
classes: ClassNames(
this.props.classes,
this.props.className
)
};
}
render() {
return (
<Block classes={ClassNames('e-container e-padding-top-25', this.state.classes)}>
<Block className={'e-row'}>
<Block classes={'brick brick-12'}>
<Text type={'h3'} classes={'e-text-indigo-400'}>ESSENCE CORE COMPONENTS</Text>
<Divider classes={'thick short e-background-indigo-400'} />
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 e-padding-top-25 e-padding-bottom-700 e-padding-top-25 e-padding-bottom-25'} style={{fontSize:'14px'}}>
There are several components that are included in the Essence Core package.
Please review them bellow to understand how to use them.
</Text>
<Card>
<CardContent>
<Block>
<Text type={'h4'} classes={'e-background-indigo-400 e-padding-top-15 e-padding-bottom-15 e-text-white'}> 1. GRID SYSTEM</Text>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
When it comes to organizing content, grids come in handy. Take a look at the examples below to pick the best system for your content.
</Text>
<Block className={'e-row e-text-center e-body1 e-text-grey-700 e-padding-top-15'}>
<Block classes={'brick brick-12 e-background-grey-300'}>
brick-12
</Block>
</Block>
<Block className={'e-row e-text-center e-body1 e-text-grey-700 e-padding-top-15'}>
<Block classes={'brick brick-6 e-background-grey-300'}>
brick-6
</Block>
<Block classes={'brick brick-6 e-background-grey-300'}>
brick-6
</Block>
</Block>
<Block className={'e-row e-text-center e-body1 e-text-grey-700 e-padding-top-15'}>
<Block classes={'brick brick-4 e-background-grey-300'}>
brick-4
</Block>
<Block classes={'brick brick-4 e-background-grey-300'}>
brick-4
</Block>
<Block classes={'brick brick-4 e-background-grey-300'}>
brick-4
</Block>
</Block>
<Block className={'e-row e-text-center e-body1 e-text-grey-700 e-padding-top-15 e-padding-bottom-15'}>
<Block classes={'brick brick-3 e-background-grey-300'}>
brick-3
</Block>
<Block classes={'brick brick-3 e-background-grey-300'}>
brick-3
</Block>
<Block classes={'brick brick-3 e-background-grey-300'}>
brick-3
</Block>
<Block classes={'brick brick-3 e-background-grey-300'}>
brick-3
</Block>
</Block>
<Text type={'h4'} classes={'e-text-indigo-400'}>HOW TO USE:</Text>
<Divider classes={'thin short e-background-indigo-400'} />
<pre className={'e-background-grey-100 e-text-black'}>
<code>
npm install <strong>essence-core</strong>
</code>
</pre>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
Core: Block component has the following option:
<br />
<br />
1. <strong>type</strong>: default <u>div</u> or from the list: <u>span</u>, <u>header</u>, <u>footer</u>, <u>section</u>, <u>ul</u>, <u>li</u>, <u>hr</u>, <u>br</u>
</Text>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
Create a new ReactJS file with the code bellow.
</Text>
<pre className={'e-background-grey-100 e-text-black'}>
<code>
import {Block} from 'essence-core';
<br />
<br />
<Block classes={'brick brick-12'}>brick-12</Block>
<br />
<br />
<Block classes={'brick brick-6'}>brick-6</Block>
<br />
<Block classes={'brick brick-6'}>brick-6</Block>
<br />
<br />
<Block classes={'brick brick-4'}>brick-4</Block>
<br />
<Block classes={'brick brick-4'}>brick-4</Block>
<br />
<Block classes={'brick brick-4'}>brick-4</Block>
<br />
<br />
<Block classes={'brick brick-3'}>brick-3</Block>
<br />
<Block classes={'brick brick-3'}>brick-3</Block>
<br />
<Block classes={'brick brick-3'}>brick-3</Block>
<br />
<Block classes={'brick brick-3'}>brick-3</Block>
<br />
<br />
... more bricks on the wall ...
</code>
</pre>
</Block>
</CardContent>
</Card>
</Block>
</Block>
</Block>
);
}
}
class AppCoreDivider extends React.Component {
constructor(props) {
super(props);
this.state = {
classes: ClassNames(
this.props.classes,
this.props.className
)
};
}
render() {
return (
<Block classes={ClassNames('e-container e-padding-top-25', this.state.classes)}>
<Block className={'e-row'}>
<Block classes={'brick brick-12'}>
<Text type={'h3'} classes={'e-text-indigo-400'}>ESSENCE CORE COMPONENTS</Text>
<Divider classes={'thick short e-background-indigo-400'} />
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 e-padding-top-25 e-padding-bottom-25'} style={{fontSize:'14px'}}>
There are several components that are included in the Essence Core package.
Please review them bellow to understand how to use them.
</Text>
<Card>
<CardContent>
<Block>
<Text type={'h4'} classes={'e-background-indigo-400 e-padding-top-15 e-padding-bottom-15 e-text-white'}> 2. DIVIDER</Text>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
According to our needs we created some dividers and stored them in a .less file called, you've guest it, dividers.
We've created three values for width and five values for height. You can combine them as you please.
</Text>
<Block className={'e-padding-top-15 e-text-blue-grey-700'}>
Thin short
<Divider classes={'thin short e-background-indigo-400'} />
</Block>
<Block className={'e-padding-top-15 e-text-blue-grey-700'}>
Thin long
<Divider classes={'thin long e-background-indigo-400'} />
</Block>
<Block className={'e-padding-top-15 e-text-blue-grey-700'}>
Thin
<Divider classes={'thin e-background-indigo-400'} />
</Block>
<Block className={'e-padding-top-15 e-text-blue-grey-700'}>
Thick short
<Divider classes={'thick short e-background-indigo-400'} />
</Block>
<Block className={'e-padding-top-15 e-text-blue-grey-700'}>
Thick long
<Divider classes={'thick long e-background-indigo-400'} />
</Block>
<Block className={'e-padding-top-15 e-text-blue-grey-700'}>
Thick
<Divider classes={'thick e-background-indigo-400'} />
</Block>
<br />
<br />
<Text type={'h4'} classes={'e-text-indigo-400'}>HOW TO USE:</Text>
<Divider classes={'thin short e-background-indigo-400'} />
<pre className={'e-background-grey-100 e-text-black'}>
<code>
npm install <strong>essence-core</strong>
</code>
</pre>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
Core: Divider component has the following option:
<br />
<br />
1. <strong>classes</strong>: className from the list: <u>thinnest</u>, <u>thin</u>, <u>regular</u>, <u>thick</u>, <u>thickest</u>, <u>short</u>, <u>medium</u>, <u>long</u>
</Text>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
Create a new ReactJS file with the code bellow.
</Text>
<pre className={'e-background-grey-100 e-text-black'}>
<code>
import {Divider} from 'essence-core';
<br />
<br />
<Divider classes={'thick short e-background-indigo-400'} />
<br />
<Divider classes={'thick long e-background-indigo-400'} />
<br />
<Divider classes={'thick short e-background-indigo-400'} />
<br />
<Divider classes={'thin long e-background-indigo-400'} />
<br />
<Divider classes={'thick e-background-indigo-400'} />
<br />
<Divider classes={'thin e-background-indigo-400'} />
<br />
</code>
</pre>
</Block>
</CardContent>
</Card>
</Block>
</Block>
</Block>
);
}
}
class AppCoreRippleInk extends React.Component {
constructor(props) {
super(props);
this.state = {
classes: ClassNames(
this.props.classes,
this.props.className
)
};
}
render() {
return (
<Block classes={ClassNames('e-container e-padding-top-25', this.state.classes)}>
<Block className={'e-row'}>
<Block classes={'brick brick-12'}>
<Text type={'h3'} classes={'e-text-indigo-400'}>ESSENCE CORE COMPONENTS</Text>
<Divider classes={'thick short e-background-indigo-400'} />
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 e-padding-top-25 e-padding-bottom-25'} style={{fontSize:'14px'}}>
There are several components that are included in the Essence Core package.
Please review them bellow to understand how to use them.
</Text>
<Card>
<CardContent>
<Block>
<Text type={'h4'} classes={'e-background-indigo-400 e-padding-top-15 e-padding-bottom-15 e-text-white'}> 3. RIPPLE INK</Text>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
This component is design for Btn component to simulate a color ripple effect on the background element.
</Text>
<Block className={'e-padding-top-50 e-text-center'}>
<Btn
label={'Ripple Effect'}
ripple={true}
type={'succes'}
className={'raised e-background-indigo-600'} />
</Block>
<br />
<br />
<Text type={'h4'} classes={'e-text-indigo-400'}>HOW TO USE:</Text>
<Divider classes={'thin short e-background-indigo-400'} />
<pre className={'e-background-grey-100 e-text-black'}>
<code>
npm install <strong>essence-core</strong>
</code>
</pre>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
Core: RippleInk component has the following options:
<br />
<br />
1. <strong>position</strong>: object with <u>x</u> for <strong>left</strong> position in px & <u>y</u> for <strong>top</strong> position in px
<br />
2. <strong>color</strong>: for <u>backgroundColor</u>
</Text>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
Include the RippleInk component inside an element container where style position must be 'relative'.
<br />
<br />
- The RippleInk will generate a div with style position absolute and the Ripple Effect with the background color calculated from the element.
<br />
- The Ripple Effect position is calculated based on the click event position inside the parent.
</Text>
<pre className={'e-background-grey-100 e-text-black'}>
<code>
import {Utils, RippleInk} from 'essence-core';
<br />
<br />
let boundingClient = this.currentButton.getBoundingClientRect();
<br />
let color = Utils.BackgroundColor(event);
<br />
let position = Utils.ClickPosition(event, boundingClient);
<br />
<br />
<RippleInk color={color} position={position}/>
</code>
</pre>
</Block>
</CardContent>
</Card>
</Block>
</Block>
</Block>
);
}
}
class AppCoreTextTypography extends React.Component {
constructor(props) {
super(props);
this.state = {
textType: 'span',
textPosition: 'e-text-center',
textTypography: 'e-body1',
active: {
'type': null,
'position': null,
'typo': null
},
classes: ClassNames(
this.props.classes,
this.props.className
)
};
}
changeType(type) {
let active = this.state.active;
active.type = type;
this.setState({
textType: type || 'span',
active: active
});
}
changePosition(position) {
let active = this.state.active;
active.position = position;
this.setState({
textPosition: position || 'e-text-center',
active: active
});
}
changeTypography(typography) {
let active = this.state.active;
active.typo = typography;
this.setState({
textTypography: typography || 'e-body1',
active: active
});
}
renderType() {
let self = this;
let typeList = [];
let types = [
'a', 'p', 'label', 'strong', 'small', 'caption', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'sup', 'sub', 'em'
];
[].forEach.call(types, function(type) {
typeList.push(
<Btn
label={type}
type={ (type === self.state.active.type) ? 'info' : 'succes' }
ripple={false}
className={ClassNames('flat', (type === self.state.active.type) ? 'e-background-indigo-600' : 'e-background-indigo-400')}
key={'text-type-' + type}
onClick={self.changeType.bind(self, type.toLowerCase())}/>
);
});
return typeList;
}
renderPosition() {
let self = this;
let positionList = [];
let positions = [
'e-text-left', 'e-text-right', 'e-text-center', 'e-text-justify', 'e-text-uppercase', 'e-text-capitalize', 'e-text-lowercase'
];
[].forEach.call(positions, function(position) {
positionList.push(
<Btn
label={position}
type={ (position === self.state.active.position) ? 'info' : 'succes'}
ripple={false}
className={ClassNames('flat', (position === self.state.active.position) ? 'e-background-indigo-600' : 'e-background-indigo-400')}
key={'text-position-' + position.toLowerCase()}
onClick={self.changePosition.bind(self, position.toLowerCase())}/>
);
});
return positionList;
}
renderTypography() {
let self = this;
let typographList = [];
let typographs = [
'e-display-4', 'e-display-3', 'e-display-2', 'e-display-1', 'e-headline', 'e-title', 'e-subhead', 'e-body2', 'e-body1', 'e-caption', 'e-button'
];
[].forEach.call(typographs, function(typograph) {
typographList.push(
<Btn
label={typograph}
type={ (typograph === self.state.active.typo) ? 'info' : 'succes'}
ripple={false}
className={ClassNames('flat', (typograph === self.state.active.typo) ? 'e-background-indigo-600' : 'e-background-indigo-400')}
key={'text-typograph-' + typograph.toLowerCase()}
onClick={self.changeTypography.bind(self, typograph.toLowerCase())}/>
);
});
return typographList;
}
render() {
return (
<Block classes={ClassNames('e-container e-padding-top-25', this.state.classes)}>
<Block className={'e-row'}>
<Block classes={'brick brick-12'}>
<Text type={'h3'} classes={'e-text-indigo-400'}>ESSENCE CORE COMPONENTS</Text>
<Divider classes={'thick short e-background-indigo-400'} />
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 e-padding-top-25 e-padding-bottom-25'} style={{fontSize:'14px'}}>
There are several components that are included in the Essence Core package.
Please review them bellow to understand how to use them.
</Text>
<Card>
<CardContent>
<Block>
<Text type={'h4'} classes={'e-background-indigo-400 e-padding-top-15 e-padding-bottom-15 e-text-white'}> 4. TEXT TYPOGRAPHY</Text>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
Typography is such an important part of a catchy website, so you must use it carefully. You are just a few classes away of doing it! To do that, we are here helping you with predefined classes.
</Text>
<Block className={'e-row'}>
<Block className={'brick brick-5'}>
<Text type={'h4'} classes={'e-text-indigo-400'}>LIVE EXAMPLE:</Text>
<Divider classes={'thin short e-background-indigo-400'} />
<Block className={'e-padding-bottom-100'} />
<Block className={'e-background-grey-100 e-text-center e-padding-top-15 e-padding-bottom-15 e-body1'}>
<Block
classes={''}>
<Text type={'{this.state.textType}'} classes={'{ClassNames(this.state.textPosition, this.state.textTypography)}'}>
<Text
target={'_blank'}
type={this.state.textType}
href={'http://getessence.io'}
classes={ClassNames('e-text-grey-600', this.state.textPosition, this.state.textTypography)}>
Text Typography Example
</Text>
</Text>
</Block>
</Block>
</Block>
<Block className={'brick brick-7'}>
<Text type={'h4'} classes={'e-text-indigo-400'}>HOW TO USE:</Text>
<Divider classes={'thin short e-background-indigo-400'} />
<pre className={'e-background-grey-100 e-text-black'}>
<code>
npm install <strong>essence-core</strong>
</code>
</pre>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
Core: Text component has the following option:
<br />
<br />
1. <strong>type</strong>: string from the list explained below
<br />
2. <strong>badge</strong>: for <u>data-badge</u> option with a maximum lenght of 3 chars
</Text>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
There are a list of available types that can be used as in the list bellow:
<br />
<Text classes={'e-caption'}>
- a,
p,
label,
strong,
small,
caption,
h1,
h2,
h3,
h4,
h5,
h6,
sup,
sub,
em
</Text>
<br />
<br />
</Text>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
For typography styling there are a list of available options:
<br />
<Text classes={'e-caption'}>
- e-text-left,
e-text-right,
e-text-center,
e-text-justify,
e-text-uppercase,
e-text-capitalize,
e-text-lowercase
<br />
- e-display-4,
e-display-3,
e-display-2,
e-display-1,
e-headline,
e-title,
e-subhead,
e-body2,
e-body1,
e-caption,
e-button
</Text>
</Text>
<pre className={'e-background-grey-100 e-text-black'}>
<code>
import {Text} from 'essence-core';
<br />
<br />
<Text type={a} href={'http://getessence.io'} target={'_blank'}>
Discover Essence
<Text/>
<br />
</code>
</pre>
</Block>
</Block>
</Block>
</CardContent>
</Card>
<Block className={'e-padding-bottom-25'}>
<Text type={'h4'} classes={'e-text-indigo-400'}>CHOOSE TEXT STYLING:</Text>
<Divider classes={'thin short e-background-indigo-400'} />
<Tab data={{
'header': [{
'context': (<Text>Type</Text>)
},{
'context': (<Text>Position</Text>)
},{
'context': (<Text>Typography</Text>)
}
],
'rows': [
(
<Block>{this.renderType()}</Block>
),
(
<Block>{this.renderPosition()}</Block>
),
(
<Block>{this.renderTypography()}</Block>
)
]
}}
classes={'e-background-indigo-400 e-text-grey-50'}
indicator={'e-background-grey-50'}/>
</Block>
</Block>
</Block>
</Block>
);
}
}
class AppCoreUtilities extends React.Component {
constructor(props) {
super(props);
this.state = {
classes: ClassNames(
this.props.classes,
this.props.className
)
};
}
render() {
return (
<Block classes={ClassNames('e-container e-padding-top-25', this.state.classes)}>
<Block classes={'e-row'}>
<Block classes={'brick brick-12'}>
<Text type={'h3'} classes={'e-text-indigo-400'}>ESSENCE CORE COMPONENTS</Text>
<Divider classes={'thick short e-background-indigo-400'} />
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 e-padding-top-25 e-padding-bottom-25'} style={{fontSize:'14px'}}>
There are several components that are included in the Essence Core package.
Please review them bellow to understand how to use them.
</Text>
<Card>
<CardContent>
<Block>
<Text type={'h4'} classes={'e-background-indigo-400 e-padding-top-15 e-padding-bottom-15 e-text-white'}> 5. UTILITIES</Text>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
Utilities are named 'Utils' and represent helpers for other components to maintain the desired functionality.
</Text>
<Divider />
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
- <strong>BackgroundColor</strong>: extracts the color property from an element, it is used on the RippleEffect for a Btn component
<br />
<br />
- <strong>ClickPosition</strong>: calculate the position of a click based on the clicked element and the parent coordinates.
<br />
<br />
- <strong>Client</strong> has 3 functions:
<br />
<u>isMobile</u> return true or false if the client uses a mobile browser,
<br />
<u>screenSize</u>: return the screen width (1 = small, 2 = medium, 3 = large),
<br />
<u>documentSize</u>: return the document size (1 = small, 2 = medium, 3 = large)
<br />
<br />
- <strong>Timer</strong>: starts a timer instance. It is used on the SnackBar & Toast component.
</Text>
<br />
<br />
<Text type={'h4'} classes={'e-text-indigo-400'}>HOW TO USE:</Text>
<Divider classes={'thin short e-background-indigo-400'} />
<pre className={'e-background-grey-100 e-text-black'}>
<code>
import {Utils} from 'essence-core';
<br />
<br />
let boundingClient = this.refs.yourElement.getBoundingClientRect();
<br />
<br />
let position = Utils.ClickPosition(event, boundingClient);
<br />
<br />
let color = Utils.BackgroundColor(event);
<br />
<br />
let isMobile = Utils.Client.isMobile();
<br />
<br />
let screenSize = Utils.Client.screenSize();
<br />
<br />
let documentSize = Utils.Client.documentSize();
<br />
<br />
this.timer = new Utils.Timer(
<br />
function() {
<br />
// your callback function
<br />
},
<br />
2000 // miliseconds
<br />
);
<br />
<br />
pauseTimer() {
<br />
if (this.timer) {
<br />
this.timer.pause();
<br />
}
<br />
}
<br />
<br />
resumeTimer() {
<br />
if (this.timer) {
<br />
this.timer.resume();
<br />
}
<br />
}
<br />
</code>
</pre>
</Block>
</CardContent>
</Card>
</Block>
</Block>
</Block>
);
}
}
exports.AppCoreGridSystem = AppCoreGridSystem;
exports.AppCoreDivider = AppCoreDivider;
exports.AppCoreRippleInk = AppCoreRippleInk;
exports.AppCoreTextTypography = AppCoreTextTypography;
exports.AppCoreUtilities = AppCoreUtilities;