esr360

@mixin colors($custom: ()) {
    $colors: map-merge((
        'brand-1' : #2e3882,
        'brand-2' : #06d2ff,
        'brand-3' : #04cec0,
        'grey-1'  : #f8f8f8,
        'grey-2'  : #bfc1c3,
        'grey-3'  : #161819
    ), $custom) !global;
}

esr360

@import 'modules/utilities/colors/colors';
@import 'modules/elements/accordion/accordion';

@include colors();
@include accordion();

esr360

@import 'modules/utilities/colors/colors';
@import 'modules/elements/accordion/accordion';

@include colors(
    'brand-1': pink
);

@include accordion(
    'panel-bg': map-get($colors, 'brand-1')
);

esr360

import React from 'react';

export class Accordion extends React.Component {
    render() {
        return (
            <div className="accordion">
                {this.props.content.map((element, index) => (
                    <div className="accordion_section" key={index}>
                        <div className="accordion_title">{element.title}</div>
                        <div className="accordion_content">

esr360

import defaults from './accordions.json';

/**
 * Render Accordion component
 * 
 * @access public
 *
 * @param {String} name
 * @param {Array}  panels
 */

esr360

const Accordion = ({name = defaults.accordions.name, panels}) => (
    <div className={name}>
        {panels.map(({title, content}, index) => (
            <div className={`${name}_section`} key={index}>
                <div className={`${name}_title`}>{title}</div>
                <div className={`${name}_content`}>{content}</div>
            </div>
        ))}
    </div>
);

esr360

const Accordion = ({name = defaults.accordions.name, panels}) => (
    <Module name={name}>
        {panels.map(({title, content}, index) => (
            <Component name="panel" key={index}>
                <Component name="title">{title}</Component>
                <Component name="content">{content}</Component>
            </Component>
        ))}
    </Module>
);

esr360

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: {
        app: [
            'webpack/hot/dev-server',
            'webpack-hot-middleware/client',
            './src/app.js'
        ]

esr360

import path from 'path';
import webpack from 'webpack';

export default function(env) {

    const target = env.target || 'node';

    const entry = (target === 'node') ? {'synergy': './src/index.js'} : {
        'synergy.web': './src/js/synergy.js',
        'synergy.web.min': './src/js/synergy.js',

esr360

/*
 * USAGE:
 * <Alert modifiers={['jizz']} alert='success' icon={['times', 'right']}>Alert Bar 2</Alert>
 *
 * Output:
 * <div class="alert-jizz-bar-success"><div class="alert_icon-right fa fa-times"></div>Alert Bar 2</div>
 */

import defaults from './alert-bar.json';