@manifoldco/web-components - npm Package Compare versions

Comparing version 0.0.28 to 0.0.29

dist/collection/components/manifold-plan-table/configured-tiers.js

@@ -76,3 +76,3 @@ import { h } from '@stencil/core';
                 h("div", { class: "icon", innerHTML: decrementIcon })),
-            h(Tooltip, { id: `feature-${planSlug}-${featureSlug}-validation-tooltip`, title: (error === null || error === void 0 ? void 0 : error.message) || '', show: error !== undefined, hide: error === undefined, innerHTML: h("input", { class: error ? 'error' : '', type: "number", name: featureSlug, id: `feature-${planSlug}-${featureSlug}`, min: min, max: max !== null && max !== void 0 ? max : undefined, step: increments, value: value.intSelection ? value.intSelection : '', onInput: handleInputFieldChange, onBlur: handleInputFieldChange, placeholder: `Incr. of ${increments}` }) }),
+            h(Tooltip, { id: `feature-${planSlug}-${featureSlug}-validation-tooltip`, title: (error === null || error === void 0 ? void 0 : error.message) || '', show: error !== undefined, hide: error === undefined, innerHTML: h("input", { class: error ? 'error' : '', type: "number", name: featureSlug, id: `feature-${planSlug}-${featureSlug}`, min: min, max: max !== null && max !== void 0 ? max : undefined, step: increments, value: (value === null || value === void 0 ? void 0 : value.intSelection) ? value.intSelection : '', onInput: handleInputFieldChange, onBlur: handleInputFieldChange, placeholder: `Incr. of ${increments}` }) }),
             h("button", { class: error ? 'error' : '', type: "button", onClick: () => {
@@ -79,0 +79,0 @@ const val = (value === null || value === void 0 ? void 0 : value.intSelection) === undefined ? 0 : value.intSelection + increments;

dist/collection/components/manifold-plan-table/manifold-plan-table.js

@@ -9,2 +9,3 @@ import { Component, Event, Host, State, Prop, h, Watch, } from '@stencil/core';
 import ConfiguredTiers from './configured-tiers';
+import StringSelect from './string-select';
 export class ManifoldPlanTable {
@@ -49,27 +50,58 @@ constructor() {
     }
+    /**
+     * Select a configured feature value and update plan cost
+     */
     selectFeature(planSlug, planName, featureSlug, value) {
+        // If featureSelection for this plan doesn't exist yet, initialize
+        if (!this.featureSelections[planSlug]) {
+            this.featureSelections[planSlug] = [];
+        }
         const idx = this.featureSelections[planSlug].findIndex((e) => {
             return e.slug === featureSlug;
         });
-        if (idx === -1) {
-            return;
-        }
         if (typeof value === 'boolean') {
-            if (value === this.featureSelections[planSlug][idx].booleanSelection) {
-                return;
+            if (idx === -1) {
+                this.featureSelections[planSlug].push({
+                    slug: featureSlug,
+                    booleanSelection: value,
+                });
             }
-            this.featureSelections[planSlug][idx].booleanSelection = value;
+            else {
+                if (value === this.featureSelections[planSlug][idx].booleanSelection) {
+                    return;
+                }
+                this.featureSelections[planSlug][idx].booleanSelection = value;
+            }
         }
         else if (typeof value === 'number') {
-            if (value === this.featureSelections[planSlug][idx].intSelection) {
-                return;
+            if (idx === -1) {
+                this.featureSelections[planSlug].push({
+                    slug: featureSlug,
+                    intSelection: value,
+                });
             }
-            this.featureSelections[planSlug][idx].intSelection = value;
+            else {
+                if (value === this.featureSelections[planSlug][idx].intSelection) {
+                    return;
+                }
+                this.featureSelections[planSlug][idx].intSelection = value;
+            }
         }
-        else {
-            if (value === this.featureSelections[planSlug][idx].stringSelection) {
-                return;
+        else if (typeof value === 'string') {
+            if (idx === -1) {
+                this.featureSelections[planSlug].push({
+                    slug: featureSlug,
+                    stringSelection: value,
+                });
             }
-            this.featureSelections[planSlug][idx].stringSelection = value;
+            else {
+                if (value === this.featureSelections[planSlug][idx].stringSelection) {
+                    return;
+                }
+                this.featureSelections[planSlug][idx].stringSelection = value;
+            }
         }
+        else {
+            throw new Error(`Unhandled feature value type: ${typeof value}`);
+        }
         // emit event
@@ -87,2 +119,19 @@ const eventDetails = {
     }
+    /**
+     * Removes selected feature
+     */
+    removeFeature(planSlug, planName, featureSlug) {
+        this.featureSelections[planSlug] = this.featureSelections[planSlug].filter((v) => v.slug !== featureSlug);
+        // emit event
+        const eventDetails = {
+            planSlug,
+            displayName: planName,
+            featureSelections: this.featureSelections[planSlug],
+        };
+        this.featureSelected.emit(eventDetails);
+        // query
+        if (this.client) {
+            this.queryProductPlan(planSlug);
+        }
+    }
     addFeatureSelectionError(err) {
@@ -136,3 +185,3 @@ const idx = this.featureErrors.findIndex((e) => e.slug === err.slug && e.planSlug === err.planSlug);
     planCellForFeature(planSlug, featureSlug) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         const plan = this.plans.find((p) => p.slug === planSlug);
@@ -153,5 +202,19 @@ if (!plan) {
                 // Select Feature
-                return (h("div", { class: "Manifold-Select" },
-                    h("label", { htmlFor: `feature-${planSlug}-${featureSlug}` }),
-                    h("select", { id: `feature-${planSlug}-${featureSlug}` }, feature.stringValues.map((value) => (h("option", { value: value.value }, `${value.display} (${toUSD(value.cost)})`))))));
+                {
+                    const selectedValue = (_b = this.featureSelections[planSlug]) === null || _b === void 0 ? void 0 : _b.find((e) => e.slug === featureSlug);
+                    const currentError = (_c = this.featureErrors) === null || _c === void 0 ? void 0 : _c.find((e) => {
+                        return e.planSlug === planSlug && e.slug === featureSlug;
+                    });
+                    return (h(StringSelect, { featureValues: feature.stringValues, featureSlug: featureSlug, planSlug: planSlug, value: selectedValue, onChange: (v) => {
+                            if (v === '') {
+                                this.removeFeature(plan.slug, plan.name, featureSlug);
+                            }
+                            else {
+                                this.removeFeatureSelectionError(plan.slug, featureSlug);
+                                this.selectFeature(plan.slug, plan.name, featureSlug, v);
+                            }
+                        }, error: currentError, onError: (e) => {
+                            this.addFeatureSelectionError(e);
+                        } }));
+                }
             case 'BooleanFeature':
@@ -167,15 +230,3 @@ if (feature.class === 'FIXED') {
                     // Toggle Feature
-                    const defaultValue = (_b = feature === null || feature === void 0 ? void 0 : feature.booleanValues) === null || _b === void 0 ? void 0 : _b.some((e) => e.default && e.value);
-                    // initialize default selections
-                    if (!this.featureSelections[planSlug]) {
-                        this.featureSelections[planSlug] = [];
-                    }
-                    if (!this.featureSelections[planSlug].find((e) => {
-                        return e.slug === featureSlug;
-                    })) {
-                        this.featureSelections[planSlug].push({
-                            slug: featureSlug,
-                            booleanSelection: defaultValue,
-                        });
-                    }
+                    const defaultValue = (_d = feature === null || feature === void 0 ? void 0 : feature.booleanValues) === null || _d === void 0 ? void 0 : _d.some((e) => e.default && e.value);
                     return (h("div", { class: "toggle-feature" },
@@ -208,3 +259,3 @@ h("div", { class: "Manifold-Toggle" },
                                     "Billed per ",
-                                    ((_c = feature.units) === null || _c === void 0 ? void 0 : _c.single) || 'unit'))),
+                                    ((_e = feature.units) === null || _e === void 0 ? void 0 : _e.single) || 'unit'))),
                         h("tbody", null, feature.intRangeValues.sort(compareRange).map((range, idx) => {
@@ -224,15 +275,8 @@ var _a;
                     }
-                    let value = this.featureSelections[planSlug].find((e) => e.slug === featureSlug);
-                    if (value === undefined) {
-                        value = {
-                            slug: featureSlug,
-                            intSelection: 0,
-                        };
-                        this.featureSelections[planSlug].push(value);
-                    }
-                    const error = this.featureErrors.find((e) => {
+                    const selectedValue = this.featureSelections[planSlug].find((e) => e.slug === featureSlug);
+                    const currentError = this.featureErrors.find((e) => {
                         return e.planSlug === planSlug && e.slug === featureSlug;
                     });
                     // Numeric Range Feature
-                    return (h(ConfiguredTiers, { featureValues: feature.intRangeValues, unit: (_d = feature.units) === null || _d === void 0 ? void 0 : _d.plural, featureSlug: featureSlug, planSlug: plan.slug, value: value, error: error, onChange: (v) => {
+                    return (h(ConfiguredTiers, { featureValues: feature.intRangeValues, unit: (_f = feature.units) === null || _f === void 0 ? void 0 : _f.plural, featureSlug: featureSlug, planSlug: plan.slug, value: selectedValue, error: currentError, onChange: (v) => {
                             this.removeFeatureSelectionError(plan.slug, featureSlug);
@@ -366,3 +410,3 @@ this.selectFeature(plan.slug, plan.name, featureSlug, v);
                 "original": "EmbeddedProductQuery['embeddedProduct']",
-                "resolved": "null | undefined | { __typename?: \"EmbeddedProduct\" | undefined; } & Pick<EmbeddedProduct, \"slug\" | \"name\"> & { featureSlugs?: ({ __typename?: \"FeatureSlugPage\" | undefined; } & { featureSlugs: ({ __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\" | \"name\">)[]; }) | null | undefined; plans?: ({ __typename?: \"PlanPage\" | undefined; } & { plans: ({ __typename?: \"Plan\" | undefined; } & Pick<Plan, \"slug\" | \"name\" | \"cost\"> & { features?: ({ __typename?: \"FeaturePage\" | undefined; } & { features: (({ __typename: \"ExcludedFeature\"; } & Pick<ExcludedFeature, \"class\"> & { featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }) | ({ __typename: \"BooleanFeature\"; } & Pick<BooleanFeature, \"class\"> & { booleanValues: ({ __typename?: \"BooleanFeatureValue\" | undefined; } & Pick<BooleanFeatureValue, \"cost\" | \"display\" | \"value\" | \"default\">)[]; featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }) | ({ __typename: \"IntRangeFeature\"; } & Pick<IntRangeFeature, \"class\"> & { intRangeValues: ({ __typename?: \"IntRangeFeatureValue\" | undefined; } & Pick<IntRangeFeatureValue, \"cost\" | \"min\" | \"max\" | \"increments\">)[]; units?: ({ __typename?: \"Units\" | undefined; } & Pick<Units, \"single\" | \"plural\">) | null | undefined; featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }) | ({ __typename: \"IntFeature\"; } & Pick<IntFeature, \"class\"> & { intValues: ({ __typename?: \"IntFeatureValue\" | undefined; } & Pick<IntFeatureValue, \"cost\" | \"display\" | \"value\">)[]; featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }) | ({ __typename: \"StringFeature\"; } & Pick<StringFeature, \"class\"> & { stringValues: ({ __typename?: \"StringFeatureValue\" | undefined; } & Pick<StringFeatureValue, \"cost\" | \"display\" | \"value\">)[]; featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }))[]; }) | null | undefined; cta?: ({ __typename?: \"Cta\" | undefined; } & Pick<Cta, \"text\" | \"uri\">) | null | undefined; })[]; }) | null | undefined; }",
+                "resolved": "null | undefined | { __typename?: \"EmbeddedProduct\" | undefined; } & Pick<EmbeddedProduct, \"slug\" | \"name\"> & { featureSlugs?: ({ __typename?: \"FeatureSlugPage\" | undefined; } & { featureSlugs: ({ __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\" | \"name\">)[]; }) | null | undefined; plans?: ({ __typename?: \"PlanPage\" | undefined; } & { plans: ({ __typename?: \"Plan\" | undefined; } & Pick<Plan, \"slug\" | \"name\" | \"cost\"> & { features?: ({ __typename?: \"FeaturePage\" | undefined; } & { features: (({ __typename: \"IntRangeFeature\"; } & Pick<IntRangeFeature, \"class\"> & { intRangeValues: ({ __typename?: \"IntRangeFeatureValue\" | undefined; } & Pick<IntRangeFeatureValue, \"cost\" | \"min\" | \"max\" | \"increments\">)[]; units?: ({ __typename?: \"Units\" | undefined; } & Pick<Units, \"single\" | \"plural\">) | null | undefined; featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }) | ({ __typename: \"StringFeature\"; } & Pick<StringFeature, \"class\"> & { stringValues: ({ __typename?: \"StringFeatureValue\" | undefined; } & Pick<StringFeatureValue, \"cost\" | \"display\" | \"value\" | \"default\">)[]; featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }) | ({ __typename: \"ExcludedFeature\"; } & Pick<ExcludedFeature, \"class\"> & { featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }) | ({ __typename: \"IntFeature\"; } & Pick<IntFeature, \"class\"> & { intValues: ({ __typename?: \"IntFeatureValue\" | undefined; } & Pick<IntFeatureValue, \"cost\" | \"display\" | \"value\">)[]; featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }) | ({ __typename: \"BooleanFeature\"; } & Pick<BooleanFeature, \"class\"> & { booleanValues: ({ __typename?: \"BooleanFeatureValue\" | undefined; } & Pick<BooleanFeatureValue, \"cost\" | \"display\" | \"value\" | \"default\">)[]; featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }))[]; }) | null | undefined; cta?: ({ __typename?: \"Cta\" | undefined; } & Pick<Cta, \"text\" | \"uri\">) | null | undefined; })[]; }) | null | undefined; }",
                 "references": {
@@ -369,0 +413,0 @@ "EmbeddedProductQuery": {

dist/collection/components/manifold-plan-table/manifold-plan-table.stories.js

@@ -0,5 +1,13 @@
+import { withKnobs, text, select } from '@storybook/addon-knobs';
 import sampleProduct from './data.json';
 const demoEmbedId = 'emb-7mbxd2jxrzw83nf6';
-export default { title: '<manifold-plan-table>' };
-export const withFetchedData = () => `<manifold-plan-table embed="${demoEmbedId}"></manifold-plan-table>`;
+export default {
+    title: '<manifold-plan-table>',
+    decorators: [withKnobs],
+};
+export const withFetchedData = () => {
+    const embedId = text('EmbedID', demoEmbedId);
+    const env = select('Environment', { Local: 'local', Prod: 'prod' }, 'prod');
+    return `<manifold-plan-table embed="${embedId}" env="${env}"></manifold-plan-table>`;
+};
 const plan1Feature3Cost = 100;
@@ -6,0 +14,0 @@ export const withProvidedData = () => {

dist/collection/types/graphql.js

@@ -1,65 +0,74 @@
-/** PlanOrderByField is the field by which the plan list will be ordered. */
-export var PlanOrderByField;
-(function (PlanOrderByField) {
-    /** Order by the cost of a plan */
-    PlanOrderByField["Cost"] = "COST";
-    /** Order by the name of a plan */
-    PlanOrderByField["Name"] = "NAME";
-    /** Order by the sorted position in relation to the plan's product */
-    PlanOrderByField["Position"] = "POSITION";
-    /** Order by the slug of a plan */
-    PlanOrderByField["Slug"] = "SLUG";
-})(PlanOrderByField || (PlanOrderByField = {}));
+/**
+ * The classes of features we support in our system. This is used to distinguish
+ * between an abstract Feature type.
+ */
+export var FeatureClass;
+(function (FeatureClass) {
+    /** A set of pre-configured features with a range of tiers. */
+    FeatureClass["Configured"] = "CONFIGURED";
+    /** A fixed feature, such as a string of text or a fixed number. */
+    FeatureClass["Fixed"] = "FIXED";
+    /** A usage based feature, where usage is bucketed in a range of tiers. */
+    FeatureClass["Metered"] = "METERED";
+})(FeatureClass || (FeatureClass = {}));
+/** FilterBy values for plan visibility. */
+export var PlanVisibilityFilter;
+(function (PlanVisibilityFilter) {
+    /** All plans. */
+    PlanVisibilityFilter["All"] = "ALL";
+    /** Plans that are marked as hidden. */
+    PlanVisibilityFilter["Hidden"] = "HIDDEN";
+    /** Plans that are marked as visible. */
+    PlanVisibilityFilter["Visible"] = "VISIBLE";
+})(PlanVisibilityFilter || (PlanVisibilityFilter = {}));
+/**
+ * FeatureSlugOrderByField is the field by which the feature slug list will be
+ * ordered.
+ */
+export var FeatureSlugOrderByField;
+(function (FeatureSlugOrderByField) {
+    /** Order feature slugs by their name. */
+    FeatureSlugOrderByField["Name"] = "NAME";
+    /**
+     * Order feature slugs by their configured position in relation to to the product
+     * they belong to.
+     */
+    FeatureSlugOrderByField["Position"] = "POSITION";
+    /** Order features by their configured slug. */
+    FeatureSlugOrderByField["Slug"] = "SLUG";
+})(FeatureSlugOrderByField || (FeatureSlugOrderByField = {}));
+/** Plan visibility options. */
+export var PlanVisibility;
+(function (PlanVisibility) {
+    /** Only hidden plans. */
+    PlanVisibility["Hidden"] = "HIDDEN";
+    /** Only visible plans. */
+    PlanVisibility["Visible"] = "VISIBLE";
+})(PlanVisibility || (PlanVisibility = {}));
 /** FeatureOrderByField is the field by which the feature list will be ordered. */
 export var FeatureOrderByField;
 (function (FeatureOrderByField) {
-    /** Order by the feature class */
+    /** Order by the feature class. */
     FeatureOrderByField["Class"] = "CLASS";
-    /** Order by the feature type */
+    /** Order by the feature type. */
     FeatureOrderByField["Type"] = "TYPE";
 })(FeatureOrderByField || (FeatureOrderByField = {}));
-/** FilterBy values for feature slug visibility */
+/** FilterBy values for feature slug visibility. */
 export var FeatureSlugVisibilityFilter;
 (function (FeatureSlugVisibilityFilter) {
-    /** Select all feature slugs */
+    /** Select all feature slugs. */
     FeatureSlugVisibilityFilter["All"] = "ALL";
-    /** Select only feature slugs which are marked hidden */
+    /** Select only feature slugs which are marked hidden. */
     FeatureSlugVisibilityFilter["Hidden"] = "HIDDEN";
-    /** Select only feature slugs which are marked visible */
+    /** Select only feature slugs which are marked visible. */
     FeatureSlugVisibilityFilter["Visible"] = "VISIBLE";
 })(FeatureSlugVisibilityFilter || (FeatureSlugVisibilityFilter = {}));
-/** FilterBy values for plan visibility */
-export var PlanVisibilityFilter;
-(function (PlanVisibilityFilter) {
-    /** All plans */
-    PlanVisibilityFilter["All"] = "ALL";
-    /** Plans that are marked as hidden */
-    PlanVisibilityFilter["Hidden"] = "HIDDEN";
-    /** Plans that are marked as visible */
-    PlanVisibilityFilter["Visible"] = "VISIBLE";
-})(PlanVisibilityFilter || (PlanVisibilityFilter = {}));
-/** Visibility options for feature slugs */
-export var FeatureSlugVisibility;
-(function (FeatureSlugVisibility) {
-    /** Filter feature slugs how are hidden */
-    FeatureSlugVisibility["Hidden"] = "HIDDEN";
-    /** Filter feature slugs which are visible */
-    FeatureSlugVisibility["Visible"] = "VISIBLE";
-})(FeatureSlugVisibility || (FeatureSlugVisibility = {}));
-/** Plan visibility options */
-export var PlanVisibility;
-(function (PlanVisibility) {
-    /** Only hidden plans */
-    PlanVisibility["Hidden"] = "HIDDEN";
-    /** Only visible plans */
-    PlanVisibility["Visible"] = "VISIBLE";
-})(PlanVisibility || (PlanVisibility = {}));
-/** CostType describes how the cost for a specific feature is calculated */
+/** CostType describes how the cost for a specific feature is calculated. */
 export var CostType;
 (function (CostType) {
-    /** A cost is per unit. All units are priced at the cost within this range.  */
+    /** A cost is per unit. All units are priced at the cost within this range. */
     CostType["PerUnit"] = "PER_UNIT";
-    /** A cost is per unit within the range. Lower ranges are priced seperately.  */
+    /** A cost is per unit within the range. Lower ranges are priced seperately. */
     CostType["PerUnitDistinct"] = "PER_UNIT_DISTINCT";
-    /** A cost is fixed for any number of units within the IntRangeFeatureValue.  */
+    /** A cost is fixed for any number of units within the IntRangeFeatureValue. */
     CostType["PerValue"] = "PER_VALUE";
@@ -72,32 +81,15 @@ /**
 })(CostType || (CostType = {}));
+/** PlanOrderByField is the field by which the plan list will be ordered. */
+export var PlanOrderByField;
+(function (PlanOrderByField) {
+    /** Order by the cost of a plan. */
+    PlanOrderByField["Cost"] = "COST";
+    /** Order by the name of a plan. */
+    PlanOrderByField["Name"] = "NAME";
+    /** Order by the sorted position in relation to the plan's product. */
+    PlanOrderByField["Position"] = "POSITION";
+    /** Order by the slug of a plan. */
+    PlanOrderByField["Slug"] = "SLUG";
+})(PlanOrderByField || (PlanOrderByField = {}));
 /**
- * FeatureSlugOrderByField is the field by which the feature slug list will be
- * ordered.
- */
-export var FeatureSlugOrderByField;
-(function (FeatureSlugOrderByField) {
-    /** Order feature slugs by their name */
-    FeatureSlugOrderByField["Name"] = "NAME";
-    /**
-     * Order feature slugs by their configured position in relation to to the product
-     * they belonog to
-     */
-    FeatureSlugOrderByField["Position"] = "POSITION";
-    /** Order features by their configured slug */
-    FeatureSlugOrderByField["Slug"] = "SLUG";
-})(FeatureSlugOrderByField || (FeatureSlugOrderByField = {}));
-/**
- * The classes of features we support in our system. This is used to distinguish
- * between an abstract Feature type.
- */
-export var FeatureClass;
-(function (FeatureClass) {
-    /** A set of pre-configured features with a range of tiers */
-    FeatureClass["Configured"] = "CONFIGURED";
-    /** A fixed feature, such as a string of text or a fixed number */
-    FeatureClass["Fixed"] = "FIXED";
-    /** A usage based feature, where usage is bucketed in a range of tiers */
-    FeatureClass["Metered"] = "METERED";
-})(FeatureClass || (FeatureClass = {}));
-/**
  * OrderByDirection is used in all paginated queries to order by a specific
@@ -108,6 +100,14 @@ * field's direction.
 (function (OrderByDirection) {
-    /** Sort the data in ascending order.  */
+    /** Sort the data in ascending order. */
     OrderByDirection["Asc"] = "ASC";
-    /** Sort the data in descending order.  */
+    /** Sort the data in descending order. */
     OrderByDirection["Desc"] = "DESC";
 })(OrderByDirection || (OrderByDirection = {}));
+/** Visibility options for feature slugs. */
+export var FeatureSlugVisibility;
+(function (FeatureSlugVisibility) {
+    /** Filter feature slugs how are hidden. */
+    FeatureSlugVisibility["Hidden"] = "HIDDEN";
+    /** Filter feature slugs which are visible. */
+    FeatureSlugVisibility["Visible"] = "VISIBLE";
+})(FeatureSlugVisibility || (FeatureSlugVisibility = {}));

dist/manifold/manifold.esm.js

@@ -1,1 +0,1 @@
-import{p as a,b as e}from"./p-a58c55fb.js";a().then(a=>e([["p-29f59f9a",[[1,"manifold-plan-table",{embed:[1],ctaText:[1,"cta-text"],baseUrl:[1,"base-url"],productData:[16],env:[1],featureSelections:[32],featureErrors:[32],product:[32],client:[32]}]]]],a));
+import{p as e,b as a}from"./p-a58c55fb.js";e().then(e=>a([["p-75618c1d",[[1,"manifold-plan-table",{embed:[1],ctaText:[1,"cta-text"],baseUrl:[1,"base-url"],productData:[16],env:[1],featureSelections:[32],featureErrors:[32],product:[32],client:[32]}]]]],e));

dist/manifold/p-7b4f302d.system.js

@@ -1,1 +0,1 @@
-System.register(["./p-b5df728b.system.js"],(function(){"use strict";var e,t;return{setters:[function(r){e=r.p;t=r.b}],execute:function(){e().then((function(e){return t([["p-b37f0875.system",[[1,"manifold-plan-table",{embed:[1],ctaText:[1,"cta-text"],baseUrl:[1,"base-url"],productData:[16],env:[1],featureSelections:[32],featureErrors:[32],product:[32],client:[32]}]]]],e)}))}}}));
+System.register(["./p-b5df728b.system.js"],(function(){"use strict";var e,t;return{setters:[function(r){e=r.p;t=r.b}],execute:function(){e().then((function(e){return t([["p-504d8244.system",[[1,"manifold-plan-table",{embed:[1],ctaText:[1,"cta-text"],baseUrl:[1,"base-url"],productData:[16],env:[1],featureSelections:[32],featureErrors:[32],product:[32],client:[32]}]]]],e)}))}}}));

dist/types/components/manifold-plan-table/configured-tiers.d.ts

@@ -10,3 +10,3 @@ import { FunctionalComponent } from '../../stencil-public-runtime';
     error?: FeatureError;
-    value: FeatureSelection;
+    value?: FeatureSelection;
     onChange: (arg0: number) => void;
@@ -13,0 +13,0 @@ onError: (arg0: FeatureError) => void;

dist/types/components/manifold-plan-table/manifold-plan-table.d.ts

@@ -25,3 +25,10 @@ import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
     queryProductPlan(planSlug: string): void;
+    /**
+     * Select a configured feature value and update plan cost
+     */
     selectFeature(planSlug: string, planName: string, featureSlug: string, value: boolean | number | string): void;
+    /**
+     * Removes selected feature
+     */
+    removeFeature(planSlug: string, planName: string, featureSlug: string): void;
     addFeatureSelectionError(err: FeatureError): void;
@@ -37,17 +44,2 @@ removeFeatureSelectionError(planSlug: string, featureSlug: string): void;
             features: (({
-                __typename: "ExcludedFeature";
-            } & Pick<import("../../types/graphql").ExcludedFeature, "class"> & {
-                featureSlug: {
-                    __typename?: "FeatureSlug" | undefined;
-                } & Pick<import("../../types/graphql").FeatureSlug, "slug">;
-            }) | ({
-                __typename: "BooleanFeature";
-            } & Pick<import("../../types/graphql").BooleanFeature, "class"> & {
-                booleanValues: ({
-                    __typename?: "BooleanFeatureValue" | undefined;
-                } & Pick<import("../../types/graphql").BooleanFeatureValue, "cost" | "value" | "display" | "default">)[];
-                featureSlug: {
-                    __typename?: "FeatureSlug" | undefined;
-                } & Pick<import("../../types/graphql").FeatureSlug, "slug">;
-            }) | ({
                 __typename: "IntRangeFeature";
@@ -65,2 +57,17 @@ } & Pick<import("../../types/graphql").IntRangeFeature, "class"> & {
             }) | ({
+                __typename: "StringFeature";
+            } & Pick<import("../../types/graphql").StringFeature, "class"> & {
+                stringValues: ({
+                    __typename?: "StringFeatureValue" | undefined;
+                } & Pick<import("../../types/graphql").StringFeatureValue, "cost" | "value" | "default" | "display">)[];
+                featureSlug: {
+                    __typename?: "FeatureSlug" | undefined;
+                } & Pick<import("../../types/graphql").FeatureSlug, "slug">;
+            }) | ({
+                __typename: "ExcludedFeature";
+            } & Pick<import("../../types/graphql").ExcludedFeature, "class"> & {
+                featureSlug: {
+                    __typename?: "FeatureSlug" | undefined;
+                } & Pick<import("../../types/graphql").FeatureSlug, "slug">;
+            }) | ({
                 __typename: "IntFeature";
@@ -75,7 +82,7 @@ } & Pick<import("../../types/graphql").IntFeature, "class"> & {
             }) | ({
-                __typename: "StringFeature";
-            } & Pick<import("../../types/graphql").StringFeature, "class"> & {
-                stringValues: ({
-                    __typename?: "StringFeatureValue" | undefined;
-                } & Pick<import("../../types/graphql").StringFeatureValue, "cost" | "value" | "display">)[];
+                __typename: "BooleanFeature";
+            } & Pick<import("../../types/graphql").BooleanFeature, "class"> & {
+                booleanValues: ({
+                    __typename?: "BooleanFeatureValue" | undefined;
+                } & Pick<import("../../types/graphql").BooleanFeatureValue, "cost" | "value" | "default" | "display">)[];
                 featureSlug: {
@@ -82,0 +89,0 @@ __typename?: "FeatureSlug" | undefined;

dist/types/components/manifold-plan-table/manifold-plan-table.stories.d.ts

 declare const _default: {
     title: string;
+    decorators: ((...args: any) => any)[];
 };
@@ -4,0 +5,0 @@ export default _default;

dist/types/types/graphql.d.ts

@@ -15,239 +15,77 @@ export declare type Maybe<T> = T | null;
 };
-/** A FeatureValue implementation which is used an INT_RANGE type */
-export declare type IntRangeFeatureValue = {
-    __typename?: 'IntRangeFeatureValue';
-    /** The additional cost of this feature */
-    cost: Scalars['Int'];
-    /**
-     * The costExponent is an exponent used to calculate the final cost for this
-     * feature value, of the form: cost x 10^(costExponent).
-     *
-     * It defaults to zero, meaning the cost is used as entered. It can be used with
-     * a negative value to charge fractions of a cent (or appropriate currency) per
-     * unit. Only values between 0 and 10 (inclusive) are valid for costExponent.
-     */
-    costExponent: Scalars['Int'];
-    /** The cost type associated with this feature */
-    costType: CostType;
-    /**
-     * Indicates wether or not this value is the default value for its feature. There
-     * can only be one default value per feature.
-     */
-    default: Scalars['Boolean'];
-    /**
-     * Optional value to express a step-based incrementing for
-     * configuration/metering.
-     *
-     * Must be a positive integer. Defaults to 1.
-     */
-    increments: Scalars['Int'];
-    /** Unset means no maximum (eg infinity).  */
-    max?: Maybe<Scalars['Int']>;
-    /** Negative infinity not supported.  */
-    min: Scalars['Int'];
+/**
+ * FeatureSlugOrderBy defines how a list of queried feature slugs are to be
+ * ordered.
+ */
+export declare type FeatureSlugOrderBy = {
+    /** The direction to order feature slugs by. */
+    direction: OrderByDirection;
+    /** The field to order feature slugs by. */
+    field: FeatureSlugOrderByField;
 };
-/** Cta is the plan's call-to-action */
-export declare type Cta = {
-    __typename?: 'Cta';
-    /** The text displayed on the CTA */
-    text: Scalars['String'];
-    /** The endpoint for the CTA */
-    uri?: Maybe<Scalars['String']>;
-};
-/** PlanFilterBy defines filter rules for listing plans. */
-export declare type PlanFilterBy = {
-    /**
-     * provide this value to filter the result by plan's visibility
-     * defaults to VISIBLE
-     */
-    visibility?: Maybe<PlanVisibilityFilter>;
-};
-/** A FeatureSlugPage is a page of queried feature slugs. */
-export declare type FeatureSlugPage = {
-    __typename?: 'FeatureSlugPage';
-    /** The feature slugs selected in the current's page of pagination. */
-    featureSlugs: Array<FeatureSlug>;
-    /** The total number of feature slugs available */
-    totalCount: Scalars['Int'];
-};
 /**
- * ExcludedFeature is a special class of feature to explicitly exclude it from a
- * plan, so that it may be displayed differently than implicit omission.
+ * The classes of features we support in our system. This is used to distinguish
+ * between an abstract Feature type.
  */
-export declare type ExcludedFeature = Feature & {
-    __typename?: 'ExcludedFeature';
-    /** ExcludedFeatures always have class FIXED.  */
+export declare enum FeatureClass {
+    /** A set of pre-configured features with a range of tiers. */
+    Configured = "CONFIGURED",
+    /** A fixed feature, such as a string of text or a fixed number. */
+    Fixed = "FIXED",
+    /** A usage based feature, where usage is bucketed in a range of tiers. */
+    Metered = "METERED"
+}
+/**
+ * IntRangeFeature is a feature where the feature values have a minimum and maximum
+ * value associated with it, giving it a range.
+ */
+export declare type IntRangeFeature = Feature & {
+    __typename?: 'IntRangeFeature';
+    /** The feature class for this feature. */
     class: FeatureClass;
-    /** The featureSlug associated with the boolean feature */
+    /** The feature slug associated with this feature. */
     featureSlug: FeatureSlug;
-};
-/** A FeatureVAlue implementation for the STRING feature type */
-export declare type StringFeatureValue = {
-    __typename?: 'StringFeatureValue';
-    /** The additional cost of this feature */
-    cost: Scalars['Int'];
+    /** The units this range is for. */
+    units?: Maybe<Units>;
     /**
-     * Indicates wether or not this value is the default value for its feature. There
-     * can only be one default value per feature.
+     * The value field is a convenience field.
+     *
+     * It is only populated when the feature's class is FIXED.
      */
-    default: Scalars['Boolean'];
-    /** The display value for this feature, used in an embedded widget */
-    display?: Maybe<Scalars['String']>;
-    /** The value used to configure this feature */
-    value: Scalars['String'];
+    value?: Maybe<IntRangeFeatureValue>;
+    /**
+     * The values field is the list of FeatureValues for this feature. CONFIGURED and
+     * METERED classes can have at most 25 feature values. FIXED types can have at
+     * most 1 feature value.
+     *
+     * TODO: add a note about when publishing you must have exactly one value for FIXED,
+     * at least 2 for CONFIGURED BOOL and STRING, and at least 1 for CONFIGURED and
+     * METERED INT.
+     */
+    values: Array<IntRangeFeatureValue>;
 };
-/** PlanOrderByField is the field by which the plan list will be ordered. */
-export declare enum PlanOrderByField {
-    /** Order by the cost of a plan */
-    Cost = "COST",
-    /** Order by the name of a plan */
-    Name = "NAME",
-    /** Order by the sorted position in relation to the plan's product */
-    Position = "POSITION",
-    /** Order by the slug of a plan */
-    Slug = "SLUG"
-}
-/** Feature describes an interface which all types of features adhere to. */
-export declare type Feature = {
-    /** The class of feature described with the given configuration */
-    class?: Maybe<FeatureClass>;
-    /** The feature slug this feature is associated with */
-    featureSlug: FeatureSlug;
-};
-/** Units defines an optional unit suffix for Int or IntRange features. */
-export declare type Units = {
-    __typename?: 'Units';
-    /** The unit name value to display if it is a plural unit */
-    plural: Scalars['String'];
-    /** The unit name value to display if it is a singular unit */
-    single: Scalars['String'];
-};
-/** FeatureOrderByField is the field by which the feature list will be ordered. */
-export declare enum FeatureOrderByField {
-    /** Order by the feature class */
-    Class = "CLASS",
-    /** Order by the feature type */
-    Type = "TYPE"
-}
-/** A PlanPage is a page of queried plans. */
-export declare type PlanPage = {
-    __typename?: 'PlanPage';
-    /** The plans selected for this page in the pagination */
-    plans: Array<Plan>;
-    /** The total amount of plans available */
-    totalCount: Scalars['Int'];
-};
-/** FeatureSlugOrderBy defines how a list of queried feature slugs are to be ordered. */
-export declare type FeatureSlugOrderBy = {
-    /** The direction to order feature slugs by */
-    direction: OrderByDirection;
-    /** The field to order feature slugs by */
-    field: FeatureSlugOrderByField;
-};
-/** EmbeddedProduct represents a product for sale. */
-export declare type EmbeddedProduct = {
-    __typename?: 'EmbeddedProduct';
-    /** List FeatureSlugs associated with the EmbeddedProduct */
-    featureSlugs?: Maybe<FeatureSlugPage>;
-    /** The embedded product's configured name */
-    name: Scalars['String'];
-    /** Get specific plan for this EmbeddedProduct */
-    plan?: Maybe<Plan>;
-    /** List Plans associated with the EmbeddedProduct */
-    plans?: Maybe<PlanPage>;
-    /** The embedded product's configured slug */
-    slug: Scalars['String'];
-};
-/** EmbeddedProduct represents a product for sale. */
-export declare type EmbeddedProductFeatureSlugsArgs = {
-    limit: Scalars['Int'];
-    offset: Scalars['Int'];
-    orderBy?: Maybe<Array<FeatureSlugOrderBy>>;
-    filterBy?: Maybe<FeatureSlugFilterBy>;
-};
-/** EmbeddedProduct represents a product for sale. */
-export declare type EmbeddedProductPlanArgs = {
-    slug: Scalars['String'];
-};
-/** EmbeddedProduct represents a product for sale. */
-export declare type EmbeddedProductPlansArgs = {
-    limit: Scalars['Int'];
-    offset: Scalars['Int'];
-    orderBy?: Maybe<Array<PlanOrderBy>>;
-    filterBy?: Maybe<PlanFilterBy>;
-};
-/** FilterBy values for feature slug visibility */
-export declare enum FeatureSlugVisibilityFilter {
-    /** Select all feature slugs */
-    All = "ALL",
-    /** Select only feature slugs which are marked hidden */
-    Hidden = "HIDDEN",
-    /** Select only feature slugs which are marked visible */
-    Visible = "VISIBLE"
-}
 /** FeaturerderBy defines how a list of queried features are to be ordered. */
 export declare type FeatureOrderBy = {
-    /** The direction to order the features by */
+    /** The direction to order the features by. */
     direction: OrderByDirection;
-    /** The field to order the features by */
+    /** The field to order the features by. */
     field: FeatureOrderByField;
 };
-/** Plan is the product plan. */
-export declare type Plan = {
-    __typename?: 'Plan';
-    /**
-     * The plan's base cost without the addition of any feature costs, expressed in
-     * the smallest unit of the currency.
-     */
-    baseCost: Scalars['Int'];
-    /**
-     * The plan's estimated cost, including costs from fixed features, and the
-     * provided values for configured and metered features.
-     */
-    cost: Scalars['Int'];
-    /** The plan's call-to-action is only populated when an embed variant is specified. */
-    cta?: Maybe<Cta>;
-    /** List Features asscociated with the Plan. */
-    features?: Maybe<FeaturePage>;
-    /** A human-readable display name for this plan. */
-    name: Scalars['String'];
-    /** A URL-friendly slug for this Plan.  */
-    slug: Scalars['String'];
-    /** The plan's visibility */
-    visibility: PlanVisibility;
-};
-/** Plan is the product plan. */
-export declare type PlanCostArgs = {
-    features?: Maybe<Array<FeatureSelection>>;
-};
-/** Plan is the product plan. */
-export declare type PlanFeaturesArgs = {
-    limit: Scalars['Int'];
-    offset: Scalars['Int'];
-    orderBy?: Maybe<Array<FeatureOrderBy>>;
-};
-/** FilterBy values for plan visibility */
+/** FilterBy values for plan visibility. */
 export declare enum PlanVisibilityFilter {
-    /** All plans */
+    /** All plans. */
     All = "ALL",
-    /** Plans that are marked as hidden */
+    /** Plans that are marked as hidden. */
     Hidden = "HIDDEN",
-    /** Plans that are marked as visible */
+    /** Plans that are marked as visible. */
     Visible = "VISIBLE"
 }
-/** Visibility options for feature slugs */
-export declare enum FeatureSlugVisibility {
-    /** Filter feature slugs how are hidden */
-    Hidden = "HIDDEN",
-    /** Filter feature slugs which are visible */
-    Visible = "VISIBLE"
-}
 /** Product represents a product for sale. */
 export declare type Product = {
     __typename?: 'Product';
-    /** List FeatureSlugs associated with the Product */
+    /** List FeatureSlugs associated with the Product. */
     featureSlugs?: Maybe<FeatureSlugPage>;
     /** The configured product name. */
     name: Scalars['String'];
-    /** List Plans associated with the Product */
+    /** List Plans associated with the Product. */
     plans?: Maybe<PlanPage>;
@@ -271,32 +109,35 @@ /** The configured product slug. */
 };
-/**
- * FeatureSelection. for cost estimation, and eventual subscription.
- * Exactly one of booleanSelection, intSelection, or stringSelection must be
- * present.
- */
-export declare type FeatureSelection = {
-    /** For a BOOLEAN feature  */
-    booleanSelection?: Maybe<Scalars['Boolean']>;
-    /** For an INT or INT_RANGE feature  */
-    intSelection?: Maybe<Scalars['Int']>;
-    /** The configured slug for the feature selection */
+/** EmbeddedProduct represents a product for sale. */
+export declare type EmbeddedProduct = {
+    __typename?: 'EmbeddedProduct';
+    /** List FeatureSlugs associated with the EmbeddedProduct. */
+    featureSlugs?: Maybe<FeatureSlugPage>;
+    /** The embedded product's configured name. */
+    name: Scalars['String'];
+    /** Get specific plan for this EmbeddedProduct. */
+    plan?: Maybe<Plan>;
+    /** List Plans associated with the EmbeddedProduct. */
+    plans?: Maybe<PlanPage>;
+    /** The embedded product's configured slug. */
     slug: Scalars['String'];
-    /** For a STRING feature. */
-    stringSelection?: Maybe<Scalars['String']>;
 };
-/** Plan visibility options */
-export declare enum PlanVisibility {
-    /** Only hidden plans */
-    Hidden = "HIDDEN",
-    /** Only visible plans */
-    Visible = "VISIBLE"
-}
-/** PlanOrderBy defines how a list of queried plans are to be ordered. */
-export declare type PlanOrderBy = {
-    /** The direction to order in */
-    direction: OrderByDirection;
-    /** The field to order by */
-    field: PlanOrderByField;
+/** EmbeddedProduct represents a product for sale. */
+export declare type EmbeddedProductFeatureSlugsArgs = {
+    limit: Scalars['Int'];
+    offset: Scalars['Int'];
+    orderBy?: Maybe<Array<FeatureSlugOrderBy>>;
+    filterBy?: Maybe<FeatureSlugFilterBy>;
 };
-/** Queries for the public API */
+/** EmbeddedProduct represents a product for sale. */
+export declare type EmbeddedProductPlanArgs = {
+    slug: Scalars['String'];
+};
+/** EmbeddedProduct represents a product for sale. */
+export declare type EmbeddedProductPlansArgs = {
+    limit: Scalars['Int'];
+    offset: Scalars['Int'];
+    orderBy?: Maybe<Array<PlanOrderBy>>;
+    filterBy?: Maybe<PlanFilterBy>;
+};
+/** Queries for the public API. */
 export declare type Query = {
@@ -309,27 +150,55 @@ __typename?: 'Query';
 };
-/** Queries for the public API */
+/** Queries for the public API. */
 export declare type QueryEmbeddedProductArgs = {
     embedId: Scalars['ID'];
 };
-/** Queries for the public API */
+/** Queries for the public API. */
 export declare type QueryProductArgs = {
     slug: Scalars['String'];
 };
-/** FeatureSlugFilterBy defines filter rules for listing feature slugs */
-export declare type FeatureSlugFilterBy = {
+/**
+ * FeatureSlugOrderByField is the field by which the feature slug list will be
+ * ordered.
+ */
+export declare enum FeatureSlugOrderByField {
+    /** Order feature slugs by their name. */
+    Name = "NAME",
     /**
-     * provide this value to filter the result by feature slug's visibility
-     * defaults to VISIBLE
+     * Order feature slugs by their configured position in relation to to the product
+     * they belong to.
      */
-    visibility?: Maybe<FeatureSlugVisibilityFilter>;
+    Position = "POSITION",
+    /** Order features by their configured slug. */
+    Slug = "SLUG"
+}
+/** Cta is the plan's call-to-action. */
+export declare type Cta = {
+    __typename?: 'Cta';
+    /** The text displayed on the CTA. */
+    text: Scalars['String'];
+    /** The endpoint for the CTA. */
+    uri?: Maybe<Scalars['String']>;
 };
-/**
- * BooleanFeature describes a feature which has either a true or false value
- * associated with it, indicating that this feature is on the plan or not.
- */
-export declare type BooleanFeature = Feature & {
-    __typename?: 'BooleanFeature';
-    /** METERED is not a valid class for Boolean features.  */
+/** A PlanPage is a page of queried plans. */
+export declare type PlanPage = {
+    __typename?: 'PlanPage';
+    /** The plans selected for this page in the pagination. */
+    plans: Array<Plan>;
+    /** The total amount of plans available. */
+    totalCount: Scalars['Int'];
+};
+/** PlanFilterBy defines filter rules for listing plans. */
+export declare type PlanFilterBy = {
+    /**
+     * provide this value to filter the result by plan's visibility
+     * defaults to VISIBLE.
+     */
+    visibility?: Maybe<PlanVisibilityFilter>;
+};
+/** StringFeature is a feature which uses a StringFeatureValue as it's value. */
+export declare type StringFeature = Feature & {
+    __typename?: 'StringFeature';
+    /** METERED is not a valid class for String features. */
     class: FeatureClass;
-    /** The featureSlug associated with the boolean feature */
+    /** The featureSlug associated with the string feature. */
     featureSlug: FeatureSlug;
@@ -341,3 +210,3 @@ /**
      */
-    value?: Maybe<BooleanFeatureValue>;
+    value?: Maybe<StringFeatureValue>;
     /**
@@ -352,83 +221,124 @@ * The values field is the list of FeatureValues for this feature. CONFIGURED and
      */
-    values: Array<BooleanFeatureValue>;
+    values: Array<StringFeatureValue>;
 };
-/** A FeaturePage is a page of queried feature pages. */
-export declare type FeaturePage = {
-    __typename?: 'FeaturePage';
-    /** The selected features available in this page */
-    features: Array<Feature>;
-    /** The total number of features available */
-    totalCount: Scalars['Int'];
+/** Units defines an optional unit suffix for Int or IntRange features. */
+export declare type Units = {
+    __typename?: 'Units';
+    /** The unit name value to display if it is a plural unit. */
+    plural: Scalars['String'];
+    /** The unit name value to display if it is a singular unit. */
+    single: Scalars['String'];
 };
-/**
- * IntRangeFeature is a feature where the feature values have a minimum and maximum
- * value associated with it, giving it a range.
- */
-export declare type IntRangeFeature = Feature & {
-    __typename?: 'IntRangeFeature';
-    /** The feature class for this feature */
-    class: FeatureClass;
-    /** The feature slug associated with this feature */
-    featureSlug: FeatureSlug;
-    /** The units this range is for */
-    units?: Maybe<Units>;
+/** A FeatureVAlue implementation for the STRING feature type. */
+export declare type StringFeatureValue = {
+    __typename?: 'StringFeatureValue';
+    /** The additional cost of this feature. */
+    cost: Scalars['Int'];
     /**
-     * The value field is a convenience field.
+     * Indicates wether or not this value is the default value for its feature. There
+     * can only be one default value per feature.
+     */
+    default: Scalars['Boolean'];
+    /** The display value for this feature, used in an embedded widget. */
+    display?: Maybe<Scalars['String']>;
+    /** The value used to configure this feature. */
+    value: Scalars['String'];
+};
+/** A FeatureValue implementation which is used an INT_RANGE type. */
+export declare type IntRangeFeatureValue = {
+    __typename?: 'IntRangeFeatureValue';
+    /** The additional cost of this feature. */
+    cost: Scalars['Int'];
+    /**
+     * The costExponent is an exponent used to calculate the final cost for this
+     * feature value, of the form: cost x 10^(costExponent).
      *
-     * It is only populated when the feature's class is FIXED.
+     * It defaults to zero, meaning the cost is used as entered. It can be used with
+     * a negative value to charge fractions of a cent (or appropriate currency) per
+     * unit. Only values between 0 and 10 (inclusive) are valid for costExponent.
      */
-    value?: Maybe<IntRangeFeatureValue>;
+    costExponent: Scalars['Int'];
+    /** The cost type associated with this feature. */
+    costType: CostType;
     /**
-     * The values field is the list of FeatureValues for this feature. CONFIGURED and
-     * METERED classes can have at most 25 feature values. FIXED types can have at
-     * most 1 feature value.
+     * Indicates wether or not this value is the default value for its feature. There
+     * can only be one default value per feature.
+     */
+    default: Scalars['Boolean'];
+    /**
+     * Optional value to express a step-based incrementing for
+     * configuration/metering.
      *
-     * TODO: add a note about when publishing you must have exactly one value for FIXED,
-     * at least 2 for CONFIGURED BOOL and STRING, and at least 1 for CONFIGURED and
-     * METERED INT.
+     * Must be a positive integer. Defaults to 1.
      */
-    values: Array<IntRangeFeatureValue>;
+    increments: Scalars['Int'];
+    /** Unset means no maximum (eg infinity). */
+    max?: Maybe<Scalars['Int']>;
+    /** Negative infinity not supported. */
+    min: Scalars['Int'];
 };
-/** CostType describes how the cost for a specific feature is calculated */
-export declare enum CostType {
-    /** A cost is per unit. All units are priced at the cost within this range.  */
-    PerUnit = "PER_UNIT",
-    /** A cost is per unit within the range. Lower ranges are priced seperately.  */
-    PerUnitDistinct = "PER_UNIT_DISTINCT",
-    /** A cost is fixed for any number of units within the IntRangeFeatureValue.  */
-    PerValue = "PER_VALUE",
+/** A FeatureSlugPage is a page of queried feature slugs. */
+export declare type FeatureSlugPage = {
+    __typename?: 'FeatureSlugPage';
+    /** The feature slugs selected in the current's page of pagination. */
+    featureSlugs: Array<FeatureSlug>;
+    /** The total number of feature slugs available. */
+    totalCount: Scalars['Int'];
+};
+/** FeatureSlugFilterBy defines filter rules for listing feature slugs. */
+export declare type FeatureSlugFilterBy = {
     /**
-     * A cost is fixed for any number of units within the IntRangeFeatureValue.
-     * Lower ranges are priced seperately.
+     * provide this value to filter the result by feature slug's visibility
+     * defaults to VISIBLE.
      */
-    PerValueDistinct = "PER_VALUE_DISTINCT"
-}
+    visibility?: Maybe<FeatureSlugVisibilityFilter>;
+};
+/** Feature describes an interface which all types of features adhere to. */
+export declare type Feature = {
+    /** The class of feature described with the given configuration. */
+    class?: Maybe<FeatureClass>;
+    /** The feature slug this feature is associated with. */
+    featureSlug: FeatureSlug;
+};
 /**
- * FeatureSlugOrderByField is the field by which the feature slug list will be
- * ordered.
+ * ExcludedFeature is a special class of feature to explicitly exclude it from a
+ * plan, so that it may be displayed differently than implicit omission.
  */
-export declare enum FeatureSlugOrderByField {
-    /** Order feature slugs by their name */
-    Name = "NAME",
+export declare type ExcludedFeature = Feature & {
+    __typename?: 'ExcludedFeature';
+    /** ExcludedFeatures always have class FIXED. */
+    class: FeatureClass;
+    /** The featureSlug associated with the boolean feature. */
+    featureSlug: FeatureSlug;
+};
+/** Plan visibility options. */
+export declare enum PlanVisibility {
+    /** Only hidden plans. */
+    Hidden = "HIDDEN",
+    /** Only visible plans. */
+    Visible = "VISIBLE"
+}
+/** A FeatureValue implementation for the INT feature type. */
+export declare type IntFeatureValue = {
+    __typename?: 'IntFeatureValue';
+    /** The additional cost of this feature. */
+    cost: Scalars['Int'];
     /**
-     * Order feature slugs by their configured position in relation to to the product
-     * they belonog to
+     * Indicates wether or not this value is the default value for its feature. There
+     * can only be one default value per feature.
      */
-    Position = "POSITION",
-    /** Order features by their configured slug */
-    Slug = "SLUG"
+    default: Scalars['Boolean'];
+    /** The display value for this feature, used in an embedded widget. */
+    display?: Maybe<Scalars['String']>;
+    /** Unset means infinity. Negative infinity is not supported. */
+    value?: Maybe<Scalars['Int']>;
+};
+/** FeatureOrderByField is the field by which the feature list will be ordered. */
+export declare enum FeatureOrderByField {
+    /** Order by the feature class. */
+    Class = "CLASS",
+    /** Order by the feature type. */
+    Type = "TYPE"
 }
 /**
- * The classes of features we support in our system. This is used to distinguish
- * between an abstract Feature type.
- */
-export declare enum FeatureClass {
-    /** A set of pre-configured features with a range of tiers */
-    Configured = "CONFIGURED",
-    /** A fixed feature, such as a string of text or a fixed number */
-    Fixed = "FIXED",
-    /** A usage based feature, where usage is bucketed in a range of tiers */
-    Metered = "METERED"
-}
-/**
  * IntFeature is a feature which uses a singular integer value to describe the
@@ -439,7 +349,7 @@ * feature's unit value.
     __typename?: 'IntFeature';
-    /** METERED is not a valid class for Int features.  */
+    /** METERED is not a valid class for Int features. */
     class: FeatureClass;
-    /** The featureSlug associated with this feature */
+    /** The featureSlug associated with this feature. */
     featureSlug: FeatureSlug;
-    /** The units this feature uses */
+    /** The units this feature uses. */
     units?: Maybe<Units>;
@@ -459,34 +369,79 @@ /**
      * at least 2 for CONFIGURED Boolean and String, and at least 1 for CONFIGURED and
-     * METERED Int
+     * METERED Int.
      */
     values: Array<IntFeatureValue>;
 };
-/** StringFeature is a feature which uses a StringFeatureValue as it's value. */
-export declare type StringFeature = Feature & {
-    __typename?: 'StringFeature';
-    /** METERED is not a valid class for String features.  */
-    class: FeatureClass;
-    /** The featureSlug associated with the string feature */
-    featureSlug: FeatureSlug;
+/** A FeaturePage is a page of queried feature pages. */
+export declare type FeaturePage = {
+    __typename?: 'FeaturePage';
+    /** The selected features available in this page. */
+    features: Array<Feature>;
+    /** The total number of features available. */
+    totalCount: Scalars['Int'];
+};
+/**
+ * FeatureSelection. for cost estimation, and eventual subscription.
+ * Exactly one of booleanSelection, intSelection, or stringSelection must be
+ * present.
+ */
+export declare type FeatureSelection = {
+    /** For a BOOLEAN feature. */
+    booleanSelection?: Maybe<Scalars['Boolean']>;
+    /** For an INT or INT_RANGE feature. */
+    intSelection?: Maybe<Scalars['Int']>;
+    /** The configured slug for the feature selection. */
+    slug: Scalars['String'];
+    /** For a STRING feature. */
+    stringSelection?: Maybe<Scalars['String']>;
+};
+/** Plan is the product plan. */
+export declare type Plan = {
+    __typename?: 'Plan';
     /**
-     * The value field is a convenience field.
-     *
-     * It is only populated when the feature's class is FIXED.
+     * The plan's base cost without the addition of any feature costs, expressed in
+     * the smallest unit of the currency.
      */
-    value?: Maybe<StringFeatureValue>;
+    baseCost: Scalars['Int'];
     /**
-     * The values field is the list of FeatureValues for this feature. CONFIGURED and
-     * METERED classes can have at most 25 feature values. FIXED types can have at
-     * most 1 feature value.
-     *
-     * TODO: add a note about when publishing you must have exactly one value for FIXED,
-     * at least 2 for CONFIGURED BOOL and STRING, and at least 1 for CONFIGURED and
-     * METERED INT.
+     * The plan's estimated cost, including costs from fixed features, and the
+     * provided values for configured and metered features.
      */
-    values: Array<StringFeatureValue>;
+    cost: Scalars['Int'];
+    /**
+     * The plan's call-to-action is only populated when an embed variant is
+     * specified.
+     */
+    cta?: Maybe<Cta>;
+    /** List Features asscociated with the Plan. */
+    features?: Maybe<FeaturePage>;
+    /** A human-readable display name for this plan. */
+    name: Scalars['String'];
+    /** A URL-friendly slug for this Plan. */
+    slug: Scalars['String'];
+    /** The plan's visibility. */
+    visibility: PlanVisibility;
 };
-/** A FeatureVAlue implementation for the BOOLEAN or EXCLUSIVE feature type */
+/** Plan is the product plan. */
+export declare type PlanCostArgs = {
+    features?: Maybe<Array<FeatureSelection>>;
+};
+/** Plan is the product plan. */
+export declare type PlanFeaturesArgs = {
+    limit: Scalars['Int'];
+    offset: Scalars['Int'];
+    orderBy?: Maybe<Array<FeatureOrderBy>>;
+};
+/** FilterBy values for feature slug visibility. */
+export declare enum FeatureSlugVisibilityFilter {
+    /** Select all feature slugs. */
+    All = "ALL",
+    /** Select only feature slugs which are marked hidden. */
+    Hidden = "HIDDEN",
+    /** Select only feature slugs which are marked visible. */
+    Visible = "VISIBLE"
+}
+/** A FeatureVAlue implementation for the BOOLEAN or EXCLUSIVE feature type. */
 export declare type BooleanFeatureValue = {
     __typename?: 'BooleanFeatureValue';
-    /** The additional cost of this feature */
+    /** The additional cost of this feature. */
     cost: Scalars['Int'];
@@ -498,7 +453,49 @@ /**
     default: Scalars['Boolean'];
-    /** The display value for this feature, used in an embedded widget */
+    /** The display value for this feature, used in an embedded widget. */
     display?: Maybe<Scalars['String']>;
-    /** The value used to configure this feature */
+    /** The value used to configure this feature. */
     value: Scalars['Boolean'];
 };
+/** CostType describes how the cost for a specific feature is calculated. */
+export declare enum CostType {
+    /** A cost is per unit. All units are priced at the cost within this range. */
+    PerUnit = "PER_UNIT",
+    /** A cost is per unit within the range. Lower ranges are priced seperately. */
+    PerUnitDistinct = "PER_UNIT_DISTINCT",
+    /** A cost is fixed for any number of units within the IntRangeFeatureValue. */
+    PerValue = "PER_VALUE",
+    /**
+     * A cost is fixed for any number of units within the IntRangeFeatureValue.
+     * Lower ranges are priced seperately.
+     */
+    PerValueDistinct = "PER_VALUE_DISTINCT"
+}
+/** PlanOrderByField is the field by which the plan list will be ordered. */
+export declare enum PlanOrderByField {
+    /** Order by the cost of a plan. */
+    Cost = "COST",
+    /** Order by the name of a plan. */
+    Name = "NAME",
+    /** Order by the sorted position in relation to the plan's product. */
+    Position = "POSITION",
+    /** Order by the slug of a plan. */
+    Slug = "SLUG"
+}
+/** FeatureSlug represents the name and slug of a set of features. */
+export declare type FeatureSlug = {
+    __typename?: 'FeatureSlug';
+    /** The human-readable name of this feature slug. */
+    name: Scalars['String'];
+    /** The URL-friendly slug of this feature slug. */
+    slug: Scalars['String'];
+    /** Visiblity of this feature slug. */
+    visibility: FeatureSlugVisibility;
+};
+/** PlanOrderBy defines how a list of queried plans are to be ordered. */
+export declare type PlanOrderBy = {
+    /** The direction to order in. */
+    direction: OrderByDirection;
+    /** The field to order by. */
+    field: PlanOrderByField;
+};
 /**
@@ -509,31 +506,40 @@ * OrderByDirection is used in all paginated queries to order by a specific
 export declare enum OrderByDirection {
-    /** Sort the data in ascending order.  */
+    /** Sort the data in ascending order. */
     Asc = "ASC",
-    /** Sort the data in descending order.  */
+    /** Sort the data in descending order. */
     Desc = "DESC"
 }
-/** FeatureSlug represents the name and slug of a set of features. */
-export declare type FeatureSlug = {
-    __typename?: 'FeatureSlug';
-    /** The human-readable name of this feature slug */
-    name: Scalars['String'];
-    /** The URL-friendly slug of this feature slug */
-    slug: Scalars['String'];
-    /** Visiblity of this feature slug */
-    visibility: FeatureSlugVisibility;
-};
-/** A FeatureValue implementation for the INT feature type */
-export declare type IntFeatureValue = {
-    __typename?: 'IntFeatureValue';
-    /** The additional cost of this feature */
-    cost: Scalars['Int'];
+/** Visibility options for feature slugs. */
+export declare enum FeatureSlugVisibility {
+    /** Filter feature slugs how are hidden. */
+    Hidden = "HIDDEN",
+    /** Filter feature slugs which are visible. */
+    Visible = "VISIBLE"
+}
+/**
+ * BooleanFeature describes a feature which has either a true or false value
+ * associated with it, indicating that this feature is on the plan or not.
+ */
+export declare type BooleanFeature = Feature & {
+    __typename?: 'BooleanFeature';
+    /** METERED is not a valid class for Boolean features. */
+    class: FeatureClass;
+    /** The featureSlug associated with the boolean feature. */
+    featureSlug: FeatureSlug;
     /**
-     * Indicates wether or not this value is the default value for its feature. There
-     * can only be one default value per feature.
+     * The value field is a convenience field.
+     *
+     * It is only populated when the feature's class is FIXED.
      */
-    default: Scalars['Boolean'];
-    /** The display value for this feature, used in an embedded widget */
-    display?: Maybe<Scalars['String']>;
-    /** Unset means infinity. Negative infinity is not supported.  */
-    value?: Maybe<Scalars['Int']>;
+    value?: Maybe<BooleanFeatureValue>;
+    /**
+     * The values field is the list of FeatureValues for this feature. CONFIGURED and
+     * METERED classes can have at most 25 feature values. FIXED types can have at
+     * most 1 feature value.
+     *
+     * TODO: add a note about when publishing you must have exactly one value for FIXED,
+     * at least 2 for CONFIGURED BOOL and STRING, and at least 1 for CONFIGURED and
+     * METERED INT.
+     */
+    values: Array<BooleanFeatureValue>;
 };
@@ -566,17 +572,2 @@ export declare type EmbeddedProductQueryVariables = Exact<{
                     features: Array<({
-                        __typename: 'ExcludedFeature';
-                    } & Pick<ExcludedFeature, 'class'> & {
-                        featureSlug: ({
-                            __typename?: 'FeatureSlug';
-                        } & Pick<FeatureSlug, 'slug'>);
-                    }) | ({
-                        __typename: 'BooleanFeature';
-                    } & Pick<BooleanFeature, 'class'> & {
-                        booleanValues: Array<({
-                            __typename?: 'BooleanFeatureValue';
-                        } & Pick<BooleanFeatureValue, 'display' | 'value' | 'cost' | 'default'>)>;
-                        featureSlug: ({
-                            __typename?: 'FeatureSlug';
-                        } & Pick<FeatureSlug, 'slug'>);
-                    }) | ({
                         __typename: 'IntRangeFeature';
@@ -594,2 +585,17 @@ } & Pick<IntRangeFeature, 'class'> & {
                     }) | ({
+                        __typename: 'StringFeature';
+                    } & Pick<StringFeature, 'class'> & {
+                        stringValues: Array<({
+                            __typename?: 'StringFeatureValue';
+                        } & Pick<StringFeatureValue, 'display' | 'value' | 'cost' | 'default'>)>;
+                        featureSlug: ({
+                            __typename?: 'FeatureSlug';
+                        } & Pick<FeatureSlug, 'slug'>);
+                    }) | ({
+                        __typename: 'ExcludedFeature';
+                    } & Pick<ExcludedFeature, 'class'> & {
+                        featureSlug: ({
+                            __typename?: 'FeatureSlug';
+                        } & Pick<FeatureSlug, 'slug'>);
+                    }) | ({
                         __typename: 'IntFeature';
@@ -604,7 +610,7 @@ } & Pick<IntFeature, 'class'> & {
                     }) | ({
-                        __typename: 'StringFeature';
-                    } & Pick<StringFeature, 'class'> & {
-                        stringValues: Array<({
-                            __typename?: 'StringFeatureValue';
-                        } & Pick<StringFeatureValue, 'display' | 'value' | 'cost'>)>;
+                        __typename: 'BooleanFeature';
+                    } & Pick<BooleanFeature, 'class'> & {
+                        booleanValues: Array<({
+                            __typename?: 'BooleanFeatureValue';
+                        } & Pick<BooleanFeatureValue, 'display' | 'value' | 'cost' | 'default'>)>;
                         featureSlug: ({
@@ -643,17 +649,2 @@ __typename?: 'FeatureSlug';
                 features: Array<({
-                    __typename: 'ExcludedFeature';
-                } & Pick<ExcludedFeature, 'class'> & {
-                    featureSlug: ({
-                        __typename?: 'FeatureSlug';
-                    } & Pick<FeatureSlug, 'slug'>);
-                }) | ({
-                    __typename: 'BooleanFeature';
-                } & Pick<BooleanFeature, 'class'> & {
-                    booleanValues: Array<({
-                        __typename?: 'BooleanFeatureValue';
-                    } & Pick<BooleanFeatureValue, 'display' | 'value' | 'cost' | 'default'>)>;
-                    featureSlug: ({
-                        __typename?: 'FeatureSlug';
-                    } & Pick<FeatureSlug, 'slug'>);
-                }) | ({
                     __typename: 'IntRangeFeature';
@@ -671,2 +662,17 @@ } & Pick<IntRangeFeature, 'class'> & {
                 }) | ({
+                    __typename: 'StringFeature';
+                } & Pick<StringFeature, 'class'> & {
+                    stringValues: Array<({
+                        __typename?: 'StringFeatureValue';
+                    } & Pick<StringFeatureValue, 'display' | 'value' | 'cost' | 'default'>)>;
+                    featureSlug: ({
+                        __typename?: 'FeatureSlug';
+                    } & Pick<FeatureSlug, 'slug'>);
+                }) | ({
+                    __typename: 'ExcludedFeature';
+                } & Pick<ExcludedFeature, 'class'> & {
+                    featureSlug: ({
+                        __typename?: 'FeatureSlug';
+                    } & Pick<FeatureSlug, 'slug'>);
+                }) | ({
                     __typename: 'IntFeature';
@@ -681,7 +687,7 @@ } & Pick<IntFeature, 'class'> & {
                 }) | ({
-                    __typename: 'StringFeature';
-                } & Pick<StringFeature, 'class'> & {
-                    stringValues: Array<({
-                        __typename?: 'StringFeatureValue';
-                    } & Pick<StringFeatureValue, 'display' | 'value' | 'cost'>)>;
+                    __typename: 'BooleanFeature';
+                } & Pick<BooleanFeature, 'class'> & {
+                    booleanValues: Array<({
+                        __typename?: 'BooleanFeatureValue';
+                    } & Pick<BooleanFeatureValue, 'display' | 'value' | 'cost' | 'default'>)>;
                     featureSlug: ({
@@ -688,0 +694,0 @@ __typename?: 'FeatureSlug';

package.json

 {
   "name": "@manifoldco/web-components",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "description": "Manifold's Web Components",
@@ -38,2 +38,3 @@ "main": "dist/index.js",
     "@stencil/sass": "^1.3.1",
+    "@storybook/addon-knobs": "^6.0.21",
     "@storybook/html": "^5.3.19",
@@ -40,0 +41,0 @@ "@types/jest": "24.9.1",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1608020

increased by1.12%

Number of package files

83

increased by2.47%

Lines of code

26036

increased by1.38%

Worsened metrics

Dev dependency count

32

increased by3.23%

No dependency changes