\r\n {!collapsed &&\r\n
\r\n )\r\n\r\n}","import React, { Component, useEffect, useState } from 'react';\r\nimport { Info } from 'react-feather';\r\nimport { BackSplash, Modal } from './Dialogs';\r\nimport { Edit, Upload, ArrowDownCircle, MessageSquare } from 'react-feather';\r\nimport { Textbox, Dropdown } from './Controls';\r\n\r\nexport class SectionTitle extends Component {\r\n static displayName = SectionTitle.name;\r\n\r\n render() {\r\n return (\r\n { setCollapsed(!collapsed) }} />\r\n }\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {children}\r\n
\r\n { setCollapsed(!collapsed) }}>{title}
\r\n \r\n {this.props.description\r\n ? \r\n \r\n :
\r\n );\r\n }\r\n}\r\n\r\nexport class SectionLabel extends Component {\r\n static displayName = SectionLabel.name;\r\n\r\n render() {\r\n return (\r\n {this.props.children}
\r\n{this.props.children}
\r\n } \r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport class ContextHelp extends Component {\r\n static displayName = Info.name;\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n showModal: false\r\n }\r\n\r\n this.onClick = this.onClick.bind(this);\r\n }\r\n\r\n onClick() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n getImageClass() {\r\n return `background-${this.props.image}`; \r\n }\r\n\r\n render() {\r\n return (\r\n {this.props.description}
\r\n {this.props.children}
\r\n \r\n \r\n {this.props.children &&\r\n { this.setState({ showModal: false }) }}>\r\n \r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nexport class Money extends Component {\r\n static displayName = Money.name;\r\n\r\n render() {\r\n return (\r\n \r\n {this.props.children}\r\n
\r\n }\r\n \r\n {this.props.image &&\r\n \r\n }\r\n
\r\n {this.props.title}
\r\n{this.props.description}
\r\n \r\n {this.props.currency}{this.props.amount}\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport class EditLink extends Component {\r\n static displayName = EditLink.name;\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nexport class DownloadLink extends Component {\r\n static displayName = DownloadLink.name;\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport class UploadLink extends Component {\r\n static displayName = UploadLink.name;\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport class MessageLink extends Component {\r\n static displayName = DownloadLink.name;\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n visible: false\r\n }\r\n\r\n this.onIconClick = this.onIconClick.bind(this);\r\n }\r\n\r\n onIconClick() {\r\n this.setState({ visible: !this.state.visible });\r\n }\r\n\r\n getClassName() {\r\n let result = 'iconLink';\r\n\r\n switch (this.props.type) {\r\n case 'warn':\r\n result += ' warn';\r\n break;\r\n case 'error':\r\n result += ' error';\r\n break;\r\n }\r\n return result;\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\n\r\nexport class Alert extends Component {\r\n static displayName = UploadLink.name;\r\n\r\n getClassName() {\r\n let result = 'alert';\r\n\r\n switch (this.props.type) {\r\n case 'warn':\r\n result += ' warn';\r\n break;\r\n case 'error':\r\n result += ' error';\r\n break;\r\n case 'success':\r\n result += ' success';\r\n break;\r\n default:\r\n result += ' info';\r\n break;\r\n }\r\n return result;\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n }\r\n\r\n This is a test
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\n\r\nexport class SkuEditor extends Component {\r\n static displayName = SkuEditor.name;\r\n\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {this.props.children}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n Select higher quantity to receive lower unit price\r\n\r\n \r\n \r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\n\r\nexport class SkuDisplay extends Component {\r\n static displayName = SkuDisplay.name;\r\n\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n return (\r\n | SKU Description | \r\n Unit Price | \r\n Quantity | \r\n Total Price | \r\n
|---|---|---|---|
| \r\n | Total | \r\n8000 | \r\n
\r\n \r\n \r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\n\r\n\r\nexport class GrandTotal extends Component {\r\n static displayName = GrandTotal.name;\r\n\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n return (\r\n | \r\n | Unit Price | \r\nQuantity | \r\nTotal Price | \r\n
|---|---|---|---|
| Chocolate | \r\n10000 | \r\n||
| Vanilla | \r\n10000 | \r\n||
| Strawberry | \r\n10000 | \r\n
\r\n \r\n \r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\n\r\nexport class SideLabel extends Component {\r\n static displayName = GrandTotal.name;\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n visible: true\r\n }\r\n\r\n }\r\n\r\n render() {\r\n return (\r\n | \r\n | Subtotal | \r\n|
| \r\n | Overage | \r\n|
| \r\n | Shipping | \r\n|
| \r\n | Total Amount | \r\n
\r\n {this.state.visible &&\r\n
\r\n )\r\n }\r\n}\r\n","import React, { Component } from 'react';\r\n\r\nimport { Breadcrumbs } from '../components/Pages';\r\nimport { Textbox } from '../components/Controls';\r\nimport { Column, Row, Card } from '../components/Containers';\r\nimport { Confirmation } from '../components/Dialogs';\r\nimport { EditLink, DownloadLink, SectionTitle, SectionLabel, SideLabel } from '../components/Components';\r\n\r\n\r\nexport class ProductSpecsPage extends Component {\r\n static displayName = ProductSpecsPage.name;\r\n \r\n constructor(props) {\r\n super(props); \r\n\r\n this.state = {\r\n showPopup: false\r\n }\r\n\r\n Breadcrumbs.instance.setActiveStep(1);\r\n }\r\n \r\n render () {\r\n return (\r\n { this.setState({visible: false})}}>\r\n {this.props.children}\r\n
\r\n }\r\n \r\n ePac App \r\n Client Name
\r\n \r\n \r\n\r\n \r\n \r\n \r\n Zipper \r\n { this.setState({ showPopup: true }) }}>40 mm \r\n \r\n Tear Notch \r\n { this.setState({ showPopup: true }) }}>22 mm \r\n
\r\n \r\n \r\n Hang Hole \r\n { this.setState({ showPopup: true }) }}>6.5 mm \r\n \r\n Valve \r\n \r\n
\r\n \r\n\r\n \r\n \r\n \r\n Material \r\n Information Sheet \r\n \r\n SKU Count \r\n \r\n \r\n
\r\n \r\n \r\n Eyemark Placement \r\n \r\n \r\n Color Specification \r\n \r\n
\r\n\r\n \r\n \r\n Rounded Corners \r\n \r\n \r\n Seal Width \r\n \r\n
\r\n\r\n \r\n \r\n ePac Connect \r\n \r\n \r\n \r\n
\r\n \r\n\r\n \r\n Color Instructions \r\n \r\n\r\n {this.state.showPopup &&\r\n { this.setState({ showPopup: false }) }} onSaveClick={() => { this.setState({ showPopup: false }) }}>\r\n \r\n }\r\n\r\n \r\n\r\n
\r\n );\r\n }\r\n}\r\n","import React, { Component } from 'react';\r\n\r\nimport { Breadcrumbs } from '../components/Pages';\r\nimport { Textbox, Dropdown } from '../components/Controls';\r\nimport { Column, Row, Card, ToggleContainer } from '../components/Containers';\r\nimport { UploadLink, SectionTitle, SkuEditor, SideLabel } from '../components/Components';\r\n\r\n\r\nexport class QuantitiesPage extends Component {\r\n static displayName = QuantitiesPage.name;\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n showPopup: false\r\n }\r\n\r\n Breadcrumbs.instance.setActiveStep(2);\r\n }\r\n\r\n render() {\r\n return (\r\n Client Name
Plow Bottom Pouch for Nutrition Bar (Barrier)
\r\n Order # 52944
\r\n\r\nComponent will be restyled separately
\r\nZipper
\r\nPlease enter the offset in mm:
\r\n\r\n ePac App \r\n Client Name
\r\n \r\n \r\n\r\n \r\n \r\n \r\n Country \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n City \r\n \r\n
\r\n\r\n \r\n \r\n Address Line 1 \r\n \r\n \r\n Postal Code \r\n \r\n
\r\n\r\n \r\n \r\n \r\n Address Line 2 \r\n \r\n\r\n \r\n Company Name \r\n \r\n\r\n \r\n \r\n State \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n\r\n \r\n \r\n \r\n Full Name \r\n \r\n \r\n Email Address \r\n \r\n
\r\n \r\n\r\n \r\n Enter PO# \r\n Attach PO \r\n Browse... \r\n\r\n \r\n\r\n \r\n \r\n\r\n
\r\n );\r\n }\r\n}\r\n","import React, { Component } from 'react';\r\n\r\nimport { Breadcrumbs } from '../components/Pages';\r\nimport { Textbox, Dropdown, Checkbox } from '../components/Controls';\r\nimport { Column, Row, Card, ToggleContainer } from '../components/Containers';\r\nimport { DownloadLink, EditLink, SectionTitle, SkuDisplay, GrandTotal, SideLabel } from '../components/Components';\r\n\r\n\r\nexport class OrderReviewPage extends Component {\r\n static displayName = OrderReviewPage.name;\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n editAddress: false\r\n }\r\n\r\n Breadcrumbs.instance.setActiveStep(3);\r\n }\r\n\r\n render() {\r\n return (\r\n Client Name
Plow Bottom Pouch for Nutrition Bar (Barrier)
\r\n Order # 52944
\r\n\r\n\r\n SalesForce \r\n Client Name
\r\n \r\n \r\n \r\n Country \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n City \r\n \r\n
\r\n\r\n \r\n \r\n Address Line 1 \r\n \r\n \r\n Postal Code \r\n \r\n
\r\n\r\n \r\n \r\n \r\n Address Line 2 \r\n \r\n\r\n \r\n Company Name \r\n \r\n\r\n \r\n \r\n State \r\n \r\n
\r\n\r\n \r\n \r\n\r\n \r\n :\r\n < Card title='Shipping Address' subtitle={ { this.setState({ editAddress: true})} }>Edit }>\r\n \r\n \r\n \r\n \r\n \r\n \r\n Download Attachment \r\n \r\n
\r\n \r\n }\r\n\r\n \r\n \r\n\r\n \r\n By placing this order I agree to ePac's Terms and Conditions \r\n \r\n \r\n\r\n \r\n\r\n
\r\n );\r\n }\r\n}\r\n","import React, { Component } from 'react';\r\n\r\nimport { Breadcrumbs } from '../components/Pages';\r\nimport { Textbox, Dropdown, Checkbox, RadioButton } from '../components/Controls';\r\nimport { Column, Row, Card, ExpandableCard, ToggleContainer } from '../components/Containers';\r\nimport { SectionTitle, SideLabel } from '../components/Components';\r\n\r\n\r\n\r\nexport class PaymentPage extends Component {\r\n static displayName = PaymentPage.name;\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.controls = {};\r\n\r\n this.state = {\r\n sameAsShipping: true,\r\n cardExpanded: true,\r\n achExpanded: false\r\n }\r\n\r\n Breadcrumbs.instance.setActiveStep(4);\r\n\r\n this.cardChange = this.cardChange.bind(this);\r\n this.achChange = this.achChange.bind(this);\r\n }\r\n\r\n cardChange() {\r\n this.controls.ach.collapse();\r\n }\r\n\r\n achChange() {\r\n this.controls.card.collapse();\r\n }\r\n\r\n render() {\r\n return (\r\n Client Name
Plow Bottom Pouch for Nutrition Bar (Barrier)
\r\n Order # 52944
\r\n\r\n {this.state.editAddress\r\n ?\r\n\r\n John Smith
\r\n 1 Chapel Hill
\r\n SW1A 2AA
\r\n
\r\n Worcester Park
\r\n Surrey
\r\n United Kingdom
\r\n
PO #123-456-789
\r\n\r\n SalesForce \r\n Client Name
\r\n { this.controls['card'] = ctrl }} onChange={this.cardChange}>\r\n \r\n \r\n Name on Card \r\n \r\n \r\n Valid Through \r\n \r\n
\r\n \r\n \r\n Card Number \r\n \r\n \r\n CVC Code \r\n \r\n
\r\n \r\n\r\n { this.controls['ach'] = ctrl }} onChange={this.achChange}>\r\n Personal Account \r\n Business Account \r\n \r\n \r\n Full Name \r\n \r\n \r\n Account Number \r\n \r\n
\r\n \r\n \r\n Bank Name \r\n \r\n \r\n Routing Number \r\n \r\n
\r\n \r\n\r\n {!this.state.sameAsShipping\r\n ?\r\n { this.setState({ sameAsShipping: value }) }}>Same as Shipping Address}>\r\n \r\n \r\n Country \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n City \r\n \r\n
\r\n\r\n \r\n \r\n Address Line 1 \r\n \r\n \r\n Postal Code \r\n \r\n
\r\n\r\n \r\n \r\n \r\n Address Line 2 \r\n \r\n\r\n \r\n Company Name \r\n \r\n\r\n \r\n \r\n State \r\n \r\n
\r\n \r\n :\r\n < Card title='Billing Address' subtitle={ { this.setState({ sameAsShipping: value }) }}>Same as Shipping Address }>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n }\r\n\r\n \r\n \r\n\r\n
\r\n );\r\n }\r\n}\r\n","import React, { Component } from 'react';\r\n\r\nimport { Breadcrumbs } from '../components/Pages';\r\nimport { Card } from '../components/Containers';\r\nimport { SectionTitle, SideLabel } from '../components/Components';\r\n\r\n\r\nexport class OrderConfirmationPage extends Component {\r\n static displayName = OrderConfirmationPage.name;\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n Breadcrumbs.instance.setActiveStep(5);\r\n }\r\n\r\n render() {\r\n return (\r\n Client Name
Plow Bottom Pouch for Nutrition Bar (Barrier)
\r\n Order # 52944
\r\n\r\n\r\n John Smith
\r\n 1 Chapel Hill
\r\n SW1A 2AA
\r\n
\r\n Worcester Park
\r\n Surrey
\r\n United Kingdom
\r\n
PO #123-456-789
\r\n\r\n SalesForce \r\n Client Name
\r\n\r\n Thank you for Placing Your Order #52944}>\r\n Next Steps: \r\n\r\n \r\n\r\n \r\n\r\n
\r\n );\r\n }\r\n}\r\n","import React, { Component } from 'react';\r\n\r\nimport { Breadcrumbs } from '../components/Pages';\r\nimport { Column, Row, Card } from '../components/Containers'; \r\nimport { UploadLink, SectionTitle, SideLabel } from '../components/Components';\r\n\r\nexport class ArtworkPage extends Component {\r\n static displayName = ArtworkPage.name;\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n Breadcrumbs.instance.setActiveStep(6);\r\n }\r\n\r\n render() {\r\n return (\r\n Client Name
Plow Bottom Pouch for Nutrition Bar (Barrier)
\r\n\r\n - \r\n
- You will receive a confirmation email with your order details and a link to download the dielines for each SKU, or download the dielines from link below.
Download Dielines \r\n - Review the Artwork Instructions to ensure proper production of artwork. \r\n
- In the next step, upload your artwork file for each SKU and click Submit. \r\n
We'll take it from there!
\r\n\r\n\r\n ePac App \r\n Client Name
\r\n \r\n \r\n \r\n\r\n\r\n \r\n\r\n \r\n \r\n SKU Description \r\n \r\n \r\n Artwork Upload \r\n \r\n
\r\n\r\n \r\n \r\n Vanilla\r\n \r\n \r\n Upload \r\n \r\n
\r\n\r\n \r\n \r\n Chocolate\r\n \r\n \r\n Upload \r\n \r\n
\r\n\r\n \r\n \r\n Strawberry\r\n \r\n \r\n Upload \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n","import React, { Component } from 'react';\r\nimport { Breadcrumbs } from '../components/Pages';\r\n\r\nimport './Custom.css'\r\n\r\nexport class Home extends Component {\r\n static displayName = Home.name;\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n Breadcrumbs.instance.setActiveStep(0);\r\n }\r\n\r\n render() {\r\n return (\r\n Client Name
Plow Bottom Pouch for Nutrition Bar (Barrier)
\r\n Order # 52944
\r\n\r\n- \r\n
- After downloading the dielines, read through the Artwork Instructions to ensure production and no delays in the process.
Download Dielines \r\n - Save the completed artwork files on your computer. \r\n
- Upload the artwork file for each SKU below. \r\n
\r\n \r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n","import React, { Component } from 'react';\r\nimport { Colorbar, ContactPopOver, Breadcrumbs, Header, Title } from '../components/Pages';\r\nimport { Card, ExpandableCard, ToggleContainer, Row, Column, TileContainer, ImageTileCircle, ButtonTile, Carousel, Page, ExpandableTab } from '../components/Containers';\r\nimport { Modal, Confirmation, BackSplash } from '../components/Dialogs';\r\nimport { Searchbox, Textbox, Dropdown, CustomDropdown, Checkbox, RadioButton, InputValidation } from '../components/Controls';\r\nimport { SectionTitle, SectionLabel, ContextHelp, Money, EditLink, DownloadLink, UploadLink, MessageLink, Alert } from '../components/Components';\r\n\r\nimport './Custom.css'\r\n\r\nexport class Overview extends Component {\r\n static displayName = Overview.name;\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n showPopup: false,\r\n showConfirmation: false,\r\n showBackSplash: false\r\n }\r\n\r\n Breadcrumbs.instance.setActiveStep(0);\r\n }\r\n\r\n render() {\r\n return (\r\n Epac Style Guide
\r\n\r\n| Components Overview | An Overview of the used page components. | \r\n
| Icons | Used icons. | \r\n
| Input Validation Demo | Demonstration of the input validation logic. | \r\n
\r\n \r\n Please note! Different styles are applied in mobile mode! You also will need to use the Browser Developer Tools to analyze the html of some of the dynamic elements. \r\n \r\n\r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n\r\n \r\n This is an alert! Valid types are success, warn, error, info. \r\n \r\n\r\n \r\n \r\n \r\n\r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n R1/C1 \r\n R1/C2 \r\n R1/C3 \r\n R1/C4 \r\n
\r\n \r\n R2/C1 \r\n R2/C2 \r\n R2/C3 \r\n R2/C4 \r\n
\r\n \r\n\r\n \r\n \r\n { alert('Selected') }} />\r\n { alert('Selected') }} />\r\n { alert('Selected') }} />\r\n { alert('Selected') }} />\r\n { alert('Selected') }} />\r\n { alert('Selected') }} />\r\n { alert('Selected') }} />\r\n { alert('Selected') }} />\r\n { alert('Selected') }} />\r\n \r\n \r\n\r\n \r\n \r\n { alert('clicked') }}> \r\n { alert('clicked') }}> \r\n { alert('clicked') }}> \r\n { alert('clicked') }}> \r\n { alert('clicked') }}> \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n { alert(txt); }} />\r\n \r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n\r\n\r\n\r\n \r\n My opinion counts \r\n \r\n\r\n \r\n My opinion counts \r\n \r\n\r\n\r\n \r\n Option 1 \r\n Option 2 \r\n \r\n\r\n\r\n \r\n My Title \r\n \r\n\r\n \r\n My Title \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n Edit \r\n \r\n\r\n \r\n Download \r\n \r\n\r\n \r\n Upload \r\n \r\n\r\n \r\n Click or hover over the icon \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\n\r\nexport class ComponentInfo extends Component {\r\n static displayName = ComponentInfo.name;\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n html: null\r\n }; \r\n }\r\n\r\n componentDidMount() {\r\n let html = document.getElementById(this.props.name).innerHTML; \r\n this.setState({\r\n html: html\r\n });\r\n }\r\n\r\n \r\n render() {\r\n return (\r\n Component Overview
\r\n\r\nAdd the following style sheets to your page:
\r\n\r\n
\r\n\r\n - \r\n
- /styles/Fonts.css \r\n
- /styles/Epac.css \r\n
- /styles/Components.css \r\n
- /styles/Containers.css \r\n
- /styles/Controls.css \r\n
- /styles/Dialogs.css \r\n
- /styles/Pages.css \r\n
- /styles/Animations.css \r\n
Fonts
\r\nAll used fonts are of the family Montserrat
\r\n\r\nHeader 1
\r\nHeader 2
\r\nHeader 3
\r\nHeader 4
\r\nThis is a Paragraph
\r\n- \r\n
- Item 1 \r\n
- Item 2 \r\n
- Item 3 \r\n
- Item 4 \r\n
Buttons
\r\nThe following displays the used button styles:
\r\n\r\nPage Components
\r\nThe Page components are used to design the overall page layout for all pages. To render the page components the styesheet Pages.css is required.
\r\n\r\nContainers
\r\nContainers are used to display related information.
\r\n\r\n\r\nTitle 1
\r\nTitle 2
\r\nTitle 3
\r\nHere we go...
\r\nHere we go...
\r\nTitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non consectetur lectus, at ullamcorper dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam mi ligula, lacinia in luctus et, hendrerit ac lectus. Aenean at condimentum turpis. Maecenas ut convallis elit. Sed et finibus sem. Proin scelerisque efficitur nunc, in fermentum sapien feugiat et. Sed non sem eu urna congue malesuada quis quis massa. Sed sed felis eget nisi feugiat faucibus ac eu magna. Proin sit amet rhoncus lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non consectetur lectus, at ullamcorper dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam mi ligula, lacinia in luctus et, hendrerit ac lectus. Aenean at condimentum turpis. Maecenas ut convallis elit. Sed et finibus sem. Proin scelerisque efficitur nunc, in fermentum sapien feugiat et. Sed non sem eu urna congue malesuada quis quis massa. Sed sed felis eget nisi feugiat faucibus ac eu magna. Proin sit amet rhoncus lacus.
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non consectetur lectus, at ullamcorper dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam mi ligula, lacinia in luctus et, hendrerit ac lectus. Aenean at condimentum turpis. Maecenas ut convallis elit. Sed et finibus sem. Proin scelerisque efficitur nunc, in fermentum sapien feugiat et. Sed non sem eu urna congue malesuada quis quis massa. Sed sed felis eget nisi feugiat faucibus ac eu magna. Proin sit amet rhoncus lacus.
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non consectetur lectus, at ullamcorper dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam mi ligula, lacinia in luctus et, hendrerit ac lectus. Aenean at condimentum turpis. Maecenas ut convallis elit. Sed et finibus sem. Proin scelerisque efficitur nunc, in fermentum sapien feugiat et. Sed non sem eu urna congue malesuada quis quis massa. Sed sed felis eget nisi feugiat faucibus ac eu magna. Proin sit amet rhoncus lacus.
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non consectetur lectus, at ullamcorper dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam mi ligula, lacinia in luctus et, hendrerit ac lectus. Aenean at condimentum turpis. Maecenas ut convallis elit. Sed et finibus sem. Proin scelerisque efficitur nunc, in fermentum sapien feugiat et. Sed non sem eu urna congue malesuada quis quis massa. Sed sed felis eget nisi feugiat faucibus ac eu magna. Proin sit amet rhoncus lacus.
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non consectetur lectus, at ullamcorper dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam mi ligula, lacinia in luctus et, hendrerit ac lectus. Aenean at condimentum turpis. Maecenas ut convallis elit. Sed et finibus sem. Proin scelerisque efficitur nunc, in fermentum sapien feugiat et. Sed non sem eu urna congue malesuada quis quis massa. Sed sed felis eget nisi feugiat faucibus ac eu magna. Proin sit amet rhoncus lacus.
Very Nice Content
1
\r\n 2
\r\n 3
\r\n Dialog Components
\r\nDialog Components include Modal Popups and Confirmation elements.
\r\n\r\n\r\n { this.setState({ showModal: false }) }}>\r\n \r\n
\r\n This is the content
\r\n\r\n { this.setState({ showConfirmation: false }) }} onSaveClick={() => { this.setState({ showConfirmation: false }) }}>\r\n \r\n
\r\n This is the content
\r\n\r\n { this.setState({ showBackSplash: false }) }}>\r\n \r\n
\r\n Controls
\r\nControls are used to capture the user input.
\r\n\r\n\r\n \r\n \r\n \r\n
\r\n Select Quantity Range...
\r\n Quantity
Unit Price
10,000 - 19,999
20,000 - 29,999
30,000 - 39,999
40,000 - 49,999
\r\n \r\n 
Option 1\r\n 
Option 2\r\n 
Option 3\r\n 
Option 4\r\n 
Option 5\r\n 
Option 6\r\n 
Option 7\r\n 
Option 8\r\n \r\n
\r\n Other Components
\r\nCollection of components to ensure consistent user experience
\r\n\r\n\r\n \r\n \r\n\r\n
\r\n );\r\n }\r\n}","import React, { useState, useEffect, useRef } from 'react';\r\nimport { Card } from '../components/Containers';\r\nimport { Colorbar, ContactPopOver, Breadcrumbs, Header, Title } from '../components/Pages';\r\n\r\nimport './IconsPage.css';\r\n\r\nexport const IconsPage = ({ }) => {\r\n Breadcrumbs.instance.setActiveStep(0);\r\n\r\n return (\r\n {this.props.name}
\r\n{this.props.description}
\r\n {this.props.stylesheets &&\r\n\r\n Required Stylesheets: \r\n {this.props.stylesheets.map((ss, idx) => {\r\n return (\r\n {idx === 0 ? ss : ', ' + ss}\r\n )\r\n })}\r\n
\r\n }\r\n \r\n {this.props.children} \r\n
\r\n\r\n \r\n {this.state.html}\r\n
\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n
\r\n )\r\n};\r\n\r\n\r\n\r\nexport const IconDescription = ({ root, name }) => {\r\n\r\n return (\r\n Icons
\r\n\r\n\r\n 
\r\n
\r\n )\r\n};\r\n\r\n\r\n","import React, { Component } from 'react';\r\n\r\nimport { Breadcrumbs } from '../components/Pages';\r\nimport { Textbox, Dropdown, Checkbox, InputValidation, ValidationOrchestrator } from '../components/Controls';\r\nimport { Column, Row, Card } from '../components/Containers';\r\nimport { SectionTitle, Alert } from '../components/Components';\r\n\r\n\r\nexport class ValidationDemoPage extends Component {\r\n static displayName = ValidationDemoPage.name;\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n hasErrors: false\r\n };\r\n\r\n this.onValidating = this.onValidating.bind(this);\r\n this.onNextClick = this.onNextClick.bind(this);\r\n Breadcrumbs.instance.setActiveStep(2);\r\n this.validationOrchestrator = new ValidationOrchestrator(this.onValidating);\r\n }\r\n\r\n onNextClick() {\r\n var valid = this.validationOrchestrator.validate();\r\n this.setState({ hasErrors: !valid });\r\n if (!valid) {\r\n var id = this.validationOrchestrator.getInvalidFieldName();\r\n var element = document.getElementById(id);\r\n\r\n if (element) { \r\n element.focus();\r\n let y = element.getBoundingClientRect().top + window.pageYOffset - 180;\r\n window.scrollTo({ top: y, behavior: 'smooth' });\r\n }\r\n }\r\n else {\r\n alert('The inputs are valid. Can now navigate to next page');\r\n document.location = '/';\r\n }\r\n }\r\n\r\n onValidating(valid) {\r\n this.setState({ hasErrors: !valid });\r\n }\r\n\r\n render() {\r\n return (\r\n {name}
\r\n\r\n This screen demonstrates the validation mechanism. For this purpose the used input elements and the layout do not align with the Figma Screens. \r\n\r\n \r\n \r\n \r\n Country \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n City \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n Address Line 1 \r\n \r\n \r\n \r\n \r\n Postal Code \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n Address Line 2 \r\n \r\n \r\n State \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n Name \r\n \r\n \r\n \r\n \r\n Some Checkbox \r\n \r\n Check to agree to ePac Terms & Conditions \r\n \r\n\r\n \r\n
\r\n\r\n\r\n \r\n\r\n {this.state.hasErrors &&\r\n There is required info missing. \r\n }\r\n \r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\n\r\n\r\n","import React, { Component } from 'react';\r\nimport { Route } from 'react-router';\r\nimport { Layout } from './pages/Layout';\r\nimport { ProductSpecsPage } from './pages/ProductSpecsPage';\r\nimport { QuantitiesPage } from './pages/QuantitiesPage';\r\nimport { OrderReviewPage } from './pages/OrderReviewPage';\r\nimport { PaymentPage } from './pages/PaymentPage';\r\nimport { OrderConfirmationPage } from './pages/OrderConfirmationPage';\r\nimport { ArtworkPage } from './pages/ArtworkPage';\r\nimport { Home } from './pages/Home';\r\nimport { Overview } from './pages/Overview';\r\nimport { IconsPage } from './pages/IconsPage';\r\nimport { ValidationDemoPage } from './pages/ValidationDemoPage';\r\n\r\nexport default class App extends Component {\r\n static displayName = App.name;\r\n\r\n render () {\r\n return (\r\n Input Validation Demo
\r\n\r\n- \r\n
- Red Border: Invalid input fields (css .control.error) \r\n
- Green Border: Valid input fields (css .control.valid) \r\n
- Blue Border: The Input field that has the focus (css .control:focus) \r\n
- On page load all invalid input fields are displayed with a red border \r\n
- Optional fields are displayed with a green border \r\n
- By pressing the \"Next\" button error messages (css .error-message) are displayed below all invalid input fields. The view port will be scrolled to the first invalid field of the screen. The input focus will be set to this element. A notification message (css .alert .error) is displayed above the next button \r\n
- A next button click will only navigate to the next screen when all input fields are valid \r\n
- Please review the Components Overview for more details on styles \r\n
Please click the next button below and complete the form in order to review the input validation.
\r\n\r\n