UNPKG

essence-templates

Version:

React Essence Templates - based on Essence Material Design Framework

Evo-Forge/Essence-Templates

364 lines (354 loc) • 16.1 kB

JavaScript

import React from 'react'; import ReactDOM from 'react-dom'; import ClassNames from 'classnames'; import Icon from 'essence-icon'; import Image from 'essence-image'; import Switch from 'essence-switch'; import { List, ListItem } from 'essence-list'; import {Block, Text, Divider} from 'essence-core'; import {Card, CardHeader, CardContent, CardFooter} from 'essence-card'; class AppList 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'}>LISTS</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'}}> Lists are best suited to presenting a homogeneous data type or sets of data types, such as images and text. Take a look at the examples below and pick one - and keep it consistent as much as possible. </Text> <Card> <CardContent> <Block classes={'e-row e-padding-bottom-25'}> <Block className={'brick brick-4 e-background-grey-100 '}> <Text type={'p'} className={'e-text-indigo-400'}>List - Single Line</Text> <List type={'navigation'}> <ListItem> <Text type={'a'}> <Switch type={'checkbox'} classes={'e-left'} name='radioButton'/> <Block classes={'content e-left'}>List Controls</Block> <Switch type={'checkbox'} classes={'e-right'} name='radioButton'/> </Text> </ListItem> <ListItem> <Text type={'a'}> <Switch type={'switches'} classes={'e-left'} name='switch'/> <Block classes={'content e-left'}>List Controls</Block> <Switch type={'switches'} classes={'e-right'} name='switch'/> </Text> </ListItem> <ListItem> <Text type={'a'}> <Icon name={'action-stars'} classes={'e-left'} /> <Block classes={'content e-left'}>Mutant Ninja</Block> <Image src={'http://i.imgur.com/DhsdGIs.jpg'} alt={'Star Wars'} classes={'e-avatar e-right'} /> </Text> </ListItem> </List> </Block> <Block className={'brick brick-4 e-background-grey-100'}> <Text type={'p'} className={'e-text-indigo-400'}>List - Two Lines</Text> <List type={'navigation'} classes={'e-twolinelist'}> <ListItem> <Text type={'a'}> <Image src={'http://i.imgur.com/5bteaK6.jpg'} alt={'Star Wars'} classes={'e-avatar e-left'}/> <Block classes={'content e-left'}> <Text classes={'primary'}>Johnny Bravo</Text> <Text classes={'secondary'}>Jan 9, 2016</Text> </Block> <Icon name={'action-info'} classes={'e-right e-text-grey-500'} /> </Text> </ListItem> <ListItem> <Text type={'a'}> <Image src={'http://i.imgur.com/xrDnt12.png'} alt={'Star Wars'} classes={'e-avatar e-left'}/> <Block classes={'content e-left'}> <Text classes={'primary'}>Uncle Bear</Text> <Text classes={'secondary'}>Jan 10, 2016</Text> </Block> <Icon name={'action-info'} classes={'e-right e-text-grey-500'} /> </Text> </ListItem> <ListItem> <Text type={'a'}> <Image src={'http://i.imgur.com/DhsdGIs.jpg'} alt={'Star Wars'} classes={'e-avatar e-left'}/> <Block classes={'content e-left'}> <Text classes={'primary'}>Mutant Ninja</Text> <Text classes={'secondary'}>Jan 11, 2016</Text> </Block> <Icon name={'action-info'} classes={'e-right e-text-grey-500'} /> </Text> </ListItem> </List> </Block> <Block className={'brick brick-4 e-background-grey-100'}> <Text type={'p'} className={'e-text-indigo-400'}>List - Three Lines</Text> <List type={'navigation'} classes={'e-threelinelist'}> <ListItem> <Text type={'a'}> <Image src={'http://i.imgur.com/5bteaK6.jpg'} alt={'Star Wars'} classes={'e-avatar e-left'}/> <Block classes={'content e-left'}> <Text classes={'primary'}>Johnny Bravo</Text> <Text classes={'secondary'}>Jan 9, 2016</Text> <Text classes={'tertiary'}>21:44</Text> </Block> <Icon name={'action-info'} classes={'e-right e-text-grey-500'} /> </Text> </ListItem> <ListItem> <Text type={'a'}> <Image src={'http://i.imgur.com/xrDnt12.png'} alt={'Star Wars'} classes={'e-avatar e-left'}/> <Block classes={'content e-left'}> <Text classes={'primary'}>Uncle Bear</Text> <Text classes={'secondary'}>Jan 10, 2016</Text> <Text classes={'tertiary'}>08:21</Text> </Block> <Icon name={'action-info'} classes={'e-right e-text-grey-500'} /> </Text> </ListItem> <ListItem> <Text type={'a'}> <Image src={'http://i.imgur.com/DhsdGIs.jpg'} alt={'Star Wars'} classes={'e-avatar e-left'}/> <Block classes={'content e-left'}> <Text classes={'primary'}>Mutant Ninja</Text> <Text classes={'secondary'}>Jan 11, 2016</Text> <Text classes={'tertiary'}>20:14</Text> </Block> <Icon name={'action-info'} classes={'e-right e-text-grey-500'} /> </Text> </ListItem> </List> </Block> </Block> <Divider /> <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-list</strong> </code> </pre> <Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}> List component has the following option: <br /> <br /> 1. <strong>type</strong>: string from the list <u>navigation</u> or <u>big-icon</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 { List, ListItem } from 'essence-list'; <br /> <br /> /* <Text type={'strong'}>List with Single Line</Text> */ <br /> <List type={'navigation'}> <br />  <ListItem> <br />   <Text type={'a'}> <br />    <Switch type={'checkbox'} classes={'e-left'} name='radioButton'/> <br />    <Block classes={'content e-left'}>List Controls</Block> <br />    <Switch type={'checkbox'} classes={'e-right'} name='radioButton'/> <br />   </Text> <br />  </ListItem> <br />  <ListItem> <br />   <Text type={'a'}> <br />    <Switch type={'switches'} classes={'e-left'} name='switch'/> <br />    <Block classes={'content e-left'}>List Controls</Block> <br />    <Switch type={'switches'} classes={'e-right'} name='switch'/> <br />   </Text> <br />  </ListItem> <br />  <ListItem> <br />   <Text type={'a'}> <br />    <Icon name={'action-stars'} classes={'e-left'} /> <br />    <Block classes={'content e-left'}>Mutant Ninja</Block> <br />    <Image src={'http://i.imgur.com/DhsdGIs.jpg'} alt={'Star Wars'} classes={'e-avatar e-right'} /> <br />   </Text> <br />  </ListItem> <br /> </List> <br /> <br /> /* <Text type={'strong'}>List with Two Lines</Text> */ <br /> <List type={'navigation'} classes={'e-twolinelist'}> <br />  <ListItem> <br />   <Text type={'a'}> <br />    <Image src={'http://i.imgur.com/5bteaK6.jpg'} alt={'Star Wars'} classes={'e-avatar e-left'}/> <br />    <Block classes={'content e-left'}> <br />     <Text classes={'primary'}>Johnny Bravo</Text> <br />     <Text classes={'secondary'}>Jan 9, 2016</Text> <br />    </Block> <br />    <Icon name={'action-info'} classes={'e-right e-text-grey-500'} /> <br />   </Text> <br />  </ListItem> <br />  <ListItem> <br />   <Text type={'a'}> <br />    <Image src={'http://i.imgur.com/xrDnt12.png'} alt={'Star Wars'} classes={'e-avatar e-left'}/> <br />    <Block classes={'content e-left'}> <br />     <Text classes={'primary'}>Uncle Bear</Text> <br />     <Text classes={'secondary'}>Jan 10, 2016</Text> <br />    </Block> <br />    <Icon name={'action-info'} classes={'e-right e-text-grey-500'} /> <br />   </Text> <br />  </ListItem> <br />  <ListItem> <br />   <Text type={'a'}> <br />    <Image src={'http://i.imgur.com/DhsdGIs.jpg'} alt={'Star Wars'} classes={'e-avatar e-left'}/> <br />    <Block classes={'content e-left'}> <br />     <Text classes={'primary'}>Mutant Ninja</Text> <br />     <Text classes={'secondary'}>Jan 11, 2016</Text> <br />    </Block> <br />    <Icon name={'action-info'} classes={'e-right e-text-grey-500'} /> <br />   </Text> <br />  </ListItem> <br /> </List> <br /> <br /> /* <Text type={'strong'}>List with Three Lines</Text> */ <br /> <List type={'navigation'} classes={'e-threelinelist'}> <br />  <ListItem> <br />   <Text type={'a'}> <br />    <Image src={'http://i.imgur.com/5bteaK6.jpg'} alt={'Star Wars'} classes={'e-avatar e-left'}/>   <br />    <Block classes={'content e-left'}> <br />     <Text classes={'primary'}>Johnny Bravo</Text> <br />     <Text classes={'secondary'}>Jan 9, 2016</Text> <br />     <Text classes={'tertiary'}>21:44</Text> <br />    </Block> <br />    <Icon name={'action-info'} classes={'e-right e-text-grey-500'} /> <br />   </Text> <br />  </ListItem> <br />  <ListItem> <br />   <Text type={'a'}> <br />    <Image src={'http://i.imgur.com/xrDnt12.png'} alt={'Star Wars'} classes={'e-avatar e-left'}/>   <br />    <Block classes={'content e-left'}> <br />     <Text classes={'primary'}>Uncle Bear</Text> <br />     <Text classes={'secondary'}>Jan 10, 2016</Text> <br />     <Text classes={'tertiary'}>08:21</Text> <br />    </Block> <br />    <Icon name={'action-info'} classes={'e-right e-text-grey-500'} /> <br />   </Text> <br />  </ListItem> <br />  <ListItem> <br />   <Text type={'a'}> <br />    <Image src={'http://i.imgur.com/DhsdGIs.jpg'} alt={'Star Wars'} classes={'e-avatar e-left'}/>   <br />    <Block classes={'content e-left'}> <br />     <Text classes={'primary'}>Mutant Ninja</Text> <br />     <Text classes={'secondary'}>Jan 11, 2016</Text> <br />     <Text classes={'tertiary'}>20:14</Text> <br />    </Block> <br />    <Icon name={'action-info'} classes={'e-right e-text-grey-500'} /> <br />   </Text> <br />  </ListItem> <br /> </List> </code> </pre> </Block> </CardContent> </Card> </Block> </Block> </Block> ); } } exports.AppList = AppList;