All files / px-modal index.js

0% Statements 0/4
0% Branches 0/5
0% Functions 0/1
0% Lines 0/4
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33                                                                 
import React from 'react';
import style from './style.scss';
 
/**
 * px-modal component
 */
export default ({
  modalHeading = 'Modal',
  btnModalNegative = 'Close',
  btnModalPositive = 'Submit',
  visible,
  children}) =>  {
    let hiddenClass = 'invisible';
    if(visible){
      hiddenClass = '';
    }
  return (
  <div className='px-modal'>
    <div className={`modal flex flex--top flex--center full-height ${hiddenClass}`} role="dialog">
      <section className="modal__content" role='region'>
        <h3 className="modal__title epsilon weight--normal">{modalHeading}</h3>
        <div className="modal__buttons flex flex--right">
          <div className='flex'>
            <button type="button" id="btnModalNegative" className="btn">{btnModalNegative}</button>
            <button type="button" id="btnModalPositive" className="btn">{btnModalPositive}</button>
          </div>
        </div>
      </section>
    </div>
    <style jsx>{style}</style>
  </div>);
}