Decisions

Quantity Decisions

Decisions in which there are cardinality restriction for the entire set. i.e. min & max range for which the collection of quantity decisions must abide by.

Minumum: 0

Maximum: 4

Quantity decision minimum or maximum are not met.

Fugiat nemo incidunt et enim optio sed in. Ut voluptatum dolores autem est qui. Esse voluptatem dolorum id magni. Voluptatibus minima tenetur modi beatae in qui rerum pariatur. Quaerat accusamus illo quis totam qui consequatur iste dolores. Placeat minima et magni quibusdam nostrum rerum illo quam. Dolores qui esse asperiores. Numquam sequi neque accusantium numquam. Earum et voluptatem fuga corporis dolore iusto. Et velit architecto autem dolorum.

Prepaid Starter

Voluptatibus minima tenetur modi beatae in qui rerum pariatur. Quaerat accusamus illo quis totam qui consequatur iste dolores. Placeat minima et magni quibusdam nostrum rerum illo quam. Dolores qui esse asperiores. Numquam sequi neque accusantium numquam.

One-Time

$20.00

Recurring Mo

$25.00

$20.00

Savings

$5.00

Prepaid Starter

One-Time

$20.00

Recurring Mo

$20.00

HTML

<div class="t-content" style="max-width: 1000px;"
    ng-controller="decisionsExampleController as ctrl">
    <div class="c-decisions">
        <div class="c-decisions-heading">
            <div class="c-decisions-title">TV</div>
            <div class="c-decisions-minimum">Minumum: <span>0</span></div>
            <div class="c-decisions-maximum">Maximum: <span>4</span></div>
        </div>
        <div class="c-generalForm">
            <fieldset class="c-fieldset">
                <div class="c-fieldset-errorContainer is-error">
                    <div class="c-fieldset-errorSummary u-flex u-flexMiddle">
                        <inv-icon glyph="'exclamation-circle'" class="u-mr"></inv-icon> Quantity decision minimum or maximum are not met.
                    </div>
                </div>
            </fieldset>
        </div>
        <div class="c-decisions">
            <p class="c-decisions-description">Fugiat nemo incidunt et enim optio sed in. Ut voluptatum dolores autem est qui. Esse voluptatem dolorum id magni. Voluptatibus minima tenetur modi beatae in qui rerum pariatur. Quaerat accusamus illo quis totam qui consequatur iste dolores. Placeat minima et magni quibusdam nostrum rerum illo quam. Dolores qui esse asperiores. Numquam sequi neque accusantium numquam. Earum et voluptatem fuga corporis dolore iusto. Et velit architecto autem dolorum.</p>
        </div>
        <div class="c-decisions-decisions">
            <div class="c-decisionOption">
                <div class="c-decisionOption-info">
                    <div class="c-decisionOption-title">Prepaid Starter</div>
                    <div class="c-decisionOption-description">
                        Voluptatibus minima tenetur modi beatae in qui rerum pariatur. Quaerat accusamus illo quis totam qui consequatur iste dolores.
                        Placeat minima et magni quibusdam nostrum rerum illo quam. Dolores qui esse asperiores. Numquam sequi neque accusantium numquam.
                    </div>
                </div>
                <div class="c-decisionOption-priceAndQuantity">
                    <div class="c-decisionOption-prices">
                        <div class="c-decisionOption-priceAndTotal">
                            <div class="c-decisionOption-pricesContainment">
                                <div class="c-decisionOption-price">
                                    <div class="c-decisionOption-priceMeta">One-Time</div>
                                    <div class="c-decisionOption-priceValue">$20.00</div>
                                </div>
                                <div class="c-decisionOption-price">
                                    <div class="c-decisionOption-priceMeta">Recurring Mo</div>
                                    <div class="c-decisionOption-price-amounts">
                                        <div class="c-decisionOption-priceValue is-updated">$25.00</div>
                                        <div class="c-decisionOption-priceValue">$20.00</div>
                                    </div>
                                </div>
                                <div class="c-decisionOption-price c-decisionOption-price--discounted">
                                    <div class="c-decisionOption-priceMeta">Savings</div>
                                    <div class="c-decisionOption-priceValue is-discount">$5.00</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <inv-stepper
                        min="ctrl.min"
                        max="ctrl.max"
                        value="ctrl.value"
                        on-change="ctrl.onChange"
                        has-error="ctrl.hasError"
                        class="c-decisionOption-quantity">
                    </inv-stepper>
                </div>
            </div>
            <div class="c-decisionOption">
                <div class="c-decisionOption-info">
                    <div class="c-decisionOption-title">Prepaid Starter</div>
                    <div class="c-decisionOption-description">
                        Voluptatibus minima tenetur modi beatae in qui rerum pariatur. Quaerat accusamus illo quis totam qui consequatur iste dolores.
                        Placeat minima et magni quibusdam nostrum rerum illo quam. Dolores qui esse asperiores. Numquam sequi neque accusantium numquam.
                    </div>
                </div>
                <div class="c-decisionOption-priceAndQuantity">
                    <div class="c-decisionOption-prices">
                        <div class="c-decisionOption-priceAndTotal">
                            <div class="c-decisionOption-pricesContainment">
                                <div class="c-decisionOption-price">
                                    <div class="c-decisionOption-priceMeta">One-Time</div>
                                    <div class="c-decisionOption-priceValue">$20.00</div>
                                </div>
                                <div class="c-decisionOption-price">
                                    <div class="c-decisionOption-priceMeta">Recurring Mo</div>
                                    <div class="c-decisionOption-priceValue">$20.00</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <inv-stepper
                        min="ctrl.min"
                        max="ctrl.max"
                        value="ctrl.value"
                        on-change="ctrl.onChange"
                        has-error="ctrl.hasError"
                        class="c-decisionOption-quantity">
                    </inv-stepper>
                </div>
            </div>
        </div>
    </div>
</div>

Bulk Decisions

Similar to quantity decision but has a pencil icon in order to show the prices and savings are editable. Does not have cardinality like quantity decisions.

Prepaid Starter

One-Time

$20.00

Recurring Mo

$33.00

$13.00

Savings

$20.00

Edited

HTML

<div class="t-content" style="max-width: 1000px;"
     ng-controller="decisionsExampleController as ctrl">
    <div class="c-decisions">
        <div class="c-decisions-heading">
            <div class="c-decisions-title">TV</div>
        </div>
        <div class="c-decisions">
            <p class="c-decisions-description">Fugiat nemo incidunt et enim optio sed in. Ut voluptatum dolores autem est qui. Esse voluptatem dolorum id magni. Voluptatibus minima tenetur modi beatae in qui rerum pariatur. Quaerat accusamus illo quis totam qui consequatur iste dolores. Placeat minima et magni quibusdam nostrum rerum illo quam. Dolores qui esse asperiores. Numquam sequi neque accusantium numquam. Earum et voluptatem fuga corporis dolore iusto. Et velit architecto autem dolorum.</p>
        </div>
        <div class="c-decisions-decisions">
            <div class="c-decisionOption">
                <div class="c-decisionOption-edit">
                    <div class="c-decisionOption-editButton c-button c-button--icon is-visible">
                        <inv-icon glyph="'pencil'"></inv-icon>
                    </div>
                </div>
                <div class="c-decisionOption-info">
                    <div class="c-decisionOption-title">Prepaid Starter</div>
                    <div class="c-decisionOption-description">
                        Voluptatibus minima tenetur modi beatae in qui rerum pariatur. Quaerat accusamus illo quis totam qui consequatur iste dolores.
                        Placeat minima et magni quibusdam nostrum rerum illo quam. Dolores qui esse asperiores. Numquam sequi neque accusantium numquam.
                    </div>
                </div>
                <div class="c-decisionOption-priceAndQuantity">
                    <div class="c-decisionOption-prices">
                        <div class="c-decisionOption-priceAndTotal">
                            <div class="c-decisionOption-pricesContainment">
                                <div class="c-decisionOption-price">
                                    <div class="c-decisionOption-priceMeta">One-Time</div>
                                    <div class="c-decisionOption-priceValue">$20.00</div>
                                </div>
                                <div class="c-decisionOption-price">
                                    <div class="c-decisionOption-priceMeta">Recurring Mo</div>
                                    <div class="c-decisionOption-price-amounts">
                                        <div class="c-decisionOption-priceValue is-updated">$33.00</div>
                                        <div class="c-decisionOption-priceValue">$13.00</div>
                                    </div>
                                </div>
                                <div class="c-decisionOption-price c-decisionOption-price--discounted">
                                    <div class="c-decisionOption-priceMeta">Savings</div>
                                    <div class="c-decisionOption-priceValue is-discount">$20.00</div>
                                </div>
                                <div class="c-decisionOption-price c-decisionOption-price--edited">
                                    <div class="c-decisionOption-priceMeta">Edited</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <inv-stepper
                            min="ctrl.min"
                            max="ctrl.max"
                            value="ctrl.value"
                            on-change="ctrl.onChange"
                            class="c-decisionOption-quantity">
                    </inv-stepper>
                </div>
            </div>
        </div>
    </div>
</div>

Decision Group

Decision that has option for a single selection from the option.

Prepaid Starter

One-Time

$20.00

Recurring Mo

$25.00

$20.00

Savings

$5.00

Prepaid Starter

One-Time

$20.00

Recurring Mo

$20.00

HTML

<div class="t-content" style="max-width: 1000px;"
    ng-controller="decisionsExampleController as ctrl">
    <div class="c-decisions">
        <div class="c-decisions-heading">
            <div class="c-decisions-title">TV</div>
        </div>
        <div class="c-decisions">
            <p class="c-decisions-description">Fugiat nemo incidunt et enim optio sed in. Ut voluptatum dolores autem est qui. Esse voluptatem dolorum id magni. Voluptatibus minima tenetur modi beatae in qui rerum pariatur. Quaerat accusamus illo quis totam qui consequatur iste dolores. Placeat minima et magni quibusdam nostrum rerum illo quam. Dolores qui esse asperiores. Numquam sequi neque accusantium numquam. Earum et voluptatem fuga corporis dolore iusto. Et velit architecto autem dolorum.</p>
        </div>
        <div class="c-decisions-decisions">
            <div class="c-decisionOption">
                <div class="c-decisionOption-info">
                    <div class="c-decisionOption-title">Prepaid Starter</div>
                    <div class="c-decisionOption-description">
                        Voluptatibus minima tenetur modi beatae in qui rerum pariatur. Quaerat accusamus illo quis totam qui consequatur iste dolores.
                        Placeat minima et magni quibusdam nostrum rerum illo quam. Dolores qui esse asperiores. Numquam sequi neque accusantium numquam.
                    </div>
                </div>
                <div class="c-decisionOption-priceAndQuantity">
                    <div class="c-decisionOption-prices">
                        <div class="c-decisionOption-priceAndTotal">
                            <div class="c-decisionOption-pricesContainment">
                                <div class="c-decisionOption-price">
                                    <div class="c-decisionOption-priceMeta">One-Time</div>
                                    <div class="c-decisionOption-priceValue">$20.00</div>
                                </div>
                                <div class="c-decisionOption-price">
                                    <div class="c-decisionOption-priceMeta">Recurring Mo</div>
                                    <div class="c-decisionOption-price-amounts">
                                        <div class="c-decisionOption-priceValue is-updated">$25.00</div>
                                        <div class="c-decisionOption-priceValue">$20.00</div>
                                    </div>
                                </div>
                                <div class="c-decisionOption-price c-decisionOption-price--discounted">
                                    <div class="c-decisionOption-priceMeta">Savings</div>
                                    <div class="c-decisionOption-priceValue is-discount">$5.00</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="c-decisionOption-selectContainer">
                        <a ng-class="{'is-selected': ctrl.selected === 1, 'is-unselectable': ctrl.selected === 1}" class="c-decisionOption-selectButton c-button"
                             ng-click="ctrl.select(1)">
                             <span ng-bind="ctrl.selected === 1 ? 'Selected': 'Select'"></span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="c-decisionOption">
                <div class="c-decisionOption-info">
                    <div class="c-decisionOption-title">Prepaid Starter</div>
                    <div class="c-decisionOption-description">
                        Voluptatibus minima tenetur modi beatae in qui rerum pariatur. Quaerat accusamus illo quis totam qui consequatur iste dolores.
                        Placeat minima et magni quibusdam nostrum rerum illo quam. Dolores qui esse asperiores. Numquam sequi neque accusantium numquam.
                    </div>
                </div>
                <div class="c-decisionOption-priceAndQuantity">
                    <div class="c-decisionOption-prices">
                        <div class="c-decisionOption-priceAndTotal">
                            <div class="c-decisionOption-pricesContainment">
                                <div class="c-decisionOption-price">
                                    <div class="c-decisionOption-priceMeta">One-Time</div>
                                    <div class="c-decisionOption-priceValue">$20.00</div>
                                </div>
                                <div class="c-decisionOption-price">
                                    <div class="c-decisionOption-priceMeta">Recurring Mo</div>
                                    <div class="c-decisionOption-priceValue">$20.00</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="c-decisionOption-selectContainer">
                        <a ng-class="{'is-selected': ctrl.selected === 2, 'is-unselectable': ctrl.selected === 2}" class="c-decisionOption-selectButton c-button"
                                ng-click="ctrl.select(2)">
                                <span ng-bind="ctrl.selected === 2 ? 'Selected': 'Select'"></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Flexible Decision Option

Decision option that allows its title to text wrap/line break

Prepaid Starter With a Title Longer Than Most

Voluptatibus minima tenetur modi beatae in qui rerum pariatur.

One-Time

$20.00

Recurring Mo

$25.00

$20.00

Savings

$5.00

HTML

<div class="t-content" style="width: 400px;"
    ng-controller="decisionsExampleController as ctrl">
    <div class="c-decisions">
        <div class="c-decisions-decisions">
            <div class="c-decisionOption c-decisionOption--flexible">
                <div class="c-decisionOption-info">
                    <div class="c-decisionOption-title">Prepaid Starter With a Title Longer Than Most</div>
                    <div class="c-decisionOption-description">
                        Voluptatibus minima tenetur modi beatae in qui rerum pariatur.
                    </div>
                </div>
                <div class="c-decisionOption-priceAndQuantity">
                    <div class="c-decisionOption-prices">
                        <div class="c-decisionOption-priceAndTotal">
                            <div class="c-decisionOption-pricesContainment">
                                <div class="c-decisionOption-price">
                                    <div class="c-decisionOption-priceMeta">One-Time</div>
                                    <div class="c-decisionOption-priceValue">$20.00</div>
                                </div>
                                <div class="c-decisionOption-price">
                                    <div class="c-decisionOption-priceMeta">Recurring Mo</div>
                                    <div class="c-decisionOption-price-amounts">
                                        <div class="c-decisionOption-priceValue is-updated">$25.00</div>
                                        <div class="c-decisionOption-priceValue">$20.00</div>
                                    </div>
                                </div>
                                <div class="c-decisionOption-price c-decisionOption-price--discounted">
                                    <div class="c-decisionOption-priceMeta">Savings</div>
                                    <div class="c-decisionOption-priceValue is-discount">$5.00</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="c-decisionOption-selectContainer">
                        <a ng-class="{'is-selected': ctrl.selected === 1, 'is-unselectable': ctrl.selected === 1}"class="c-decisionOption-selectButton c-button"
                             ng-click="ctrl.select(1)">
                             <span ng-bind="ctrl.selected === 1 ? 'Selected': 'Select'"></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>