import React from 'react';
import autobind from 'core-decorators/es/autobind';
import { Button, Intent, Collapse } from '@blueprintjs/core';
import MarkdownRenderer from '../../../../../../lib/react/components/MarkdownRenderer';

import '../../scss/components/_instruction-panel.scss';


@autobind
class InstructionCollapse extends React.Component {
	state = {
		isOpen: false,
	}

	toggleOpen() {
		this.setState((prevState) => {
			return { isOpen: !prevState.isOpen }
		});
	}

	render() {
		const { title, content } = this.props.article;

		return (
			<div className='instruction-collapse'>
				<Button className='pt-fill ' text={title} 
					iconName={this.state.isOpen?'chevron-up':'chevron-down'} onClick={this.toggleOpen}/>
				<Collapse isOpen={this.state.isOpen}>
					<div className='instruction-panel'>
						<MarkdownRenderer className='markdown-content' src={content}/>
					</div>
				</Collapse>
			</div>
		);
	}
}


export default InstructionCollapse;

import React from 'react';
import autobind from 'core-decorators/es/autobind';
import { Button, Intent, Collapse } from '@blueprintjs/core';
import MarkdownRenderer from '../../../../../../lib/react/components/MarkdownRenderer';

import '../../scss/components/_instruction-panel.scss';


@autobind
class InstructionCollapse extends React.Component {
	state = {
		isOpen: false,
	}

	toggleOpen() {
		this.setState((prevState) => {
			return { isOpen: !prevState.isOpen }
		});
	}

	render() {
		const { title, content } = this.props.article;

		return (
			<div className='instruction-collapse'>
				<Button className='pt-fill ' text={title} 
					iconName={this.state.isOpen?'remove':'add'} onClick={this.toggleOpen}/>
				<Collapse isOpen={this.state.isOpen}>
					<div className='instruction-panel'>
						<MarkdownRenderer className='markdown-content' src={content}/>
					</div>
				</Collapse>
			</div>
		);
	}
}


export default InstructionCollapse;

--- 
+++ 
@@ -24,7 +24,7 @@
 		return (
 			<div className='instruction-collapse'>
 				<Button className='pt-fill ' text={title} 
-					iconName={this.state.isOpen?'remove':'add'} onClick={this.toggleOpen}/>
+					iconName={this.state.isOpen?'chevron-up':'chevron-down'} onClick={this.toggleOpen}/>
 				<Collapse isOpen={this.state.isOpen}>
 					<div className='instruction-panel'>
 						<MarkdownRenderer className='markdown-content' src={content}/>
[ADD] Change the icon on instructions view to chevrons
