modifiers with props

[azu]

I think it is difficult to create expected class name string by suitcss-classnames.

    static propTypes = {
        align: React.PropTypes.oneOf(["left", "center", "right"])
    };

    render() {
        // <Component>--modifier
        const names = suitClassNames({
            component: this.constructor.name,
            modifiers: {
                align: this.props.align
            }
        });
        // `Component--alignLeft` is happy!
   }

ref: suitcss/components-grid: Component CSS for grids

Component--alignLeft is suitabe classname. But, current result is Component--align :(

vs.

        const names = suitClassNames({
            component: this.constructor.name,
            modifiers: {
                align: this.props.align
            }
        });

should be Component--alignLeft.

OR

Provide alternative way of creating.

        const names = suitClassNames({
            component: this.constructor.name,
            modifiers: {
                [`align${this.props.align}`]: this.props.align
            }
        });

[azu]

Alternative way:

            const UpperCase = (text) => {
                return text.replace(/^[a-z]/g, function (val) {
                    return val.toUpperCase();
                });
            };
            const align = "left";
            const alignNames = align ? `align${UpperCase(align)}` : undefined;
            const className = suitClassNames({
                component: "ComponentName",
                modifiers: [alignNames]
            });
            const classes = className.split(/\s+/);
            assert.equal(classes.length, 2);
            assert(classes.indexOf("ComponentName") !== -1);
            assert(classes.indexOf("ComponentName--alignLeft") !== -1);