@ulu/frontend-vue 0.1.1-beta.1 → 0.1.1-beta.11

package/types/plugins/popovers/useFollow.d.ts

@@ -3,12 +3,12 @@ export default function useFollowPoint(userOptions: any): {
      * Reactive X value
      * @type {Object}
      */
-    x: any;
+    x: Object;
     /**
      * Reactive Y value
      * @type {Object}
      */
-    y: any;
+    y: Object;
     /**
      * Show follow tooltip
      */
@@ -24,8 +24,8 @@ export default function useFollowPoint(userOptions: any): {
      * @param {Object} changes.y New 'y' value
      */
     update(changes: {
-        x: any;
-        y: any;
+        x: Object;
+        y: Object;
     }): void;
 };
 //# sourceMappingURL=useFollow.d.ts.map

package/types/plugins/popovers/useFollow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFollow.d.ts","sourceRoot":"","sources":["../../../lib/plugins/popovers/useFollow.js"],"names":[],"mappings":"AAOA;IAoCI;;;OAGG;;IAEH;;;OAGG;;IAEH;;OAEG;;IAIH;;OAEG;;IAIH;;;;;OAKG;oBAFA;QAAwB,CAAC;QACD,CAAC;KAC3B;EASJ"}
+{"version":3,"file":"useFollow.d.ts","sourceRoot":"","sources":["../../../lib/plugins/popovers/useFollow.js"],"names":[],"mappings":"AAOA;IAoCI;;;OAGG;OADO,MAAM;IAGhB;;;OAGG;OADO,MAAM;IAGhB;;OAEG;;IAIH;;OAEG;;IAIH;;;;;OAKG;oBAFA;QAAwB,CAAC,EAAjB,MAAM;QACU,CAAC,EAAjB,MAAM;KAChB;EASJ"}

package/types/plugins/toast/UluToast.vue.d.ts

@@ -0,0 +1,52 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /**
+     * Toast configuration
+     */
+    toast: ObjectConstructor;
+    /**
+     * Icons for each element { icon, header, content, date, actions, action, closeButton, title, body, closeButton }
+     */
+    classes: {
+        type: ObjectConstructor;
+        default: () => {
+            content: string;
+            date: string;
+            actions: string;
+            action: string;
+            closeButton: string;
+        };
+    };
+}>, {}, {}, {}, {
+    handleAction(event: any, action: any): void;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Toast configuration
+     */
+    toast: ObjectConstructor;
+    /**
+     * Icons for each element { icon, header, content, date, actions, action, closeButton, title, body, closeButton }
+     */
+    classes: {
+        type: ObjectConstructor;
+        default: () => {
+            content: string;
+            date: string;
+            actions: string;
+            action: string;
+            closeButton: string;
+        };
+    };
+}>> & Readonly<{}>, {
+    classes: Record<string, any>;
+}, {}, {
+    UluIcon: import("vue").DefineComponent<{}, {
+        $props: Partial<{
+            readonly spaced: boolean;
+            readonly icon?: string | boolean | unknown[] | Record<string, any> | undefined;
+        }>;
+        spaced: boolean;
+        icon?: string | boolean | unknown[] | Record<string, any> | undefined;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# sourceMappingURL=UluToast.vue.d.ts.map

package/types/plugins/toast/UluToast.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluToast.vue.d.ts","sourceRoot":"","sources":["../../../lib/plugins/toast/UluToast.vue"],"names":[],"mappings":";IA+FM;;OAEG;;IAEH;;OAEG;;;;;;;;;;;;;;IANH;;OAEG;;IAEH;;OAEG"}

package/types/plugins/toast/UluToastDisplay.vue.d.ts

@@ -0,0 +1,13 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {
+    toasts: never[];
+    pluginOptions: {
+        componentName: string;
+        componentNameDisplay: string;
+        teleportTo: string;
+        position: string[];
+    };
+}, {
+    classes(): string[];
+}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# sourceMappingURL=UluToastDisplay.vue.d.ts.map

package/types/plugins/toast/UluToastDisplay.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluToastDisplay.vue.d.ts","sourceRoot":"","sources":["../../../lib/plugins/toast/UluToastDisplay.vue"],"names":[],"mappings":""}

package/types/plugins/toast/defaults.d.ts

@@ -1,8 +1,45 @@
 declare namespace _default {
     namespace toastOptions {
-        let component: any;
+        let component: import("vue").Raw<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+            toast: ObjectConstructor;
+            classes: {
+                type: ObjectConstructor;
+                default: () => {
+                    content: string;
+                    date: string;
+                    actions: string;
+                    action: string;
+                    closeButton: string;
+                };
+            };
+        }>, {}, {}, {}, {
+            handleAction(event: any, action: any): void;
+        }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+            toast: ObjectConstructor;
+            classes: {
+                type: ObjectConstructor;
+                default: () => {
+                    content: string;
+                    date: string;
+                    actions: string;
+                    action: string;
+                    closeButton: string;
+                };
+            };
+        }>> & Readonly<{}>, {
+            classes: Record<string, any>;
+        }, {}, {
+            UluIcon: import("vue").DefineComponent<{}, {
+                $props: Partial<{
+                    readonly spaced: boolean;
+                    readonly icon?: string | boolean | unknown[] | Record<string, any> | undefined;
+                }>;
+                spaced: boolean;
+                icon?: string | boolean | unknown[] | Record<string, any> | undefined;
+            }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+        }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
         let duration: number;
-        let actions: any[];
+        let actions: never[];
     }
     namespace pluginOptions {
         let componentName: string;

package/types/plugins/toast/store.d.ts

@@ -1,14 +1,77 @@
 /**
  * Reactive State Object (used inside global components, and as API globally)
  */
-export const store: any;
+export const store: {
+    toasts: never[];
+    pluginOptions: {
+        componentName: string;
+        componentNameDisplay: string;
+        teleportTo: string;
+        position: string[];
+    };
+    toastOptions: {
+        component: import("vue").Raw<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+            toast: ObjectConstructor;
+            classes: {
+                type: ObjectConstructor;
+                default: () => {
+                    content: string;
+                    date: string;
+                    actions: string;
+                    action: string;
+                    closeButton: string;
+                };
+            };
+        }>, {}, {}, {}, {
+            handleAction(event: any, action: any): void;
+        }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+            toast: ObjectConstructor;
+            classes: {
+                type: ObjectConstructor;
+                default: () => {
+                    content: string;
+                    date: string;
+                    actions: string;
+                    action: string;
+                    closeButton: string;
+                };
+            };
+        }>> & Readonly<{}>, {
+            classes: Record<string, any>;
+        }, {}, {
+            UluIcon: import("vue").DefineComponent<{}, {
+                $props: Partial<{
+                    readonly spaced: boolean;
+                    readonly icon?: string | boolean | unknown[] | Record<string, any> | undefined;
+                }>;
+                spaced: boolean;
+                icon?: string | boolean | unknown[] | Record<string, any> | undefined;
+            }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+        }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+        duration: number;
+        actions: never[];
+    };
+    setToastOptions: (options: any) => {
+        componentName: string;
+        componentNameDisplay: string;
+        teleportTo: string;
+        position: string[];
+    };
+    setPluginOptions: (options: any) => {
+        componentName: string;
+        componentNameDisplay: string;
+        teleportTo: string;
+        position: string[];
+    };
+    createToast: (options: any) => any;
+};
 export namespace api {
     /**
      *
      * @param {Object} options Toast options
      * @returns Toast object (to be used to remove)
      */
-    function add(options: any): any;
+    function add(options: Object): any;
     /**
      *
      * @param {Object} toast Toast uid

package/types/plugins/toast/store.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../../lib/plugins/toast/store.js"],"names":[],"mappings":"AAMA;;GAEG;AACH,wBAwBG;;IAMD;;;;OAIG;IACH,gCASC;IACD;;;OAGG;IACH,gCAKC;IACD;;OAEG;IACH,2BAEC"}
+{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../../lib/plugins/toast/store.js"],"names":[],"mappings":"AAMA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBG;;IAMD;;;;OAIG;IACH,sBAHW,MAAM,OAYhB;IACD;;;OAGG;IACH,gCAKC;IACD;;OAEG;IACH,2BAEC"}

package/types/utils/dom.d.ts

@@ -4,6 +4,6 @@
  * @param {HTMLElement|Object} value - The unwrapped value from a template ref (e.g., `this.$refs.myElement` or `this.$refs.myComponent`)
  * @returns {HTMLElement} The HTMLElement or undefined if not found/resolved.
  */
-export function refToElement(value: HTMLElement | any): HTMLElement;
+export function refToElement(value: HTMLElement | Object): HTMLElement;
 export function newId(prefix?: string): any;
 //# sourceMappingURL=dom.d.ts.map

package/types/utils/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../lib/utils/dom.js"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,oCAHW,WAAW,MAAO,GAChB,WAAW,CASvB;AAKD,4CAOC"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../lib/utils/dom.js"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,oCAHW,WAAW,GAAC,MAAM,GAChB,WAAW,CASvB;AAKD,4CAOC"}

package/types/utils/router.d.ts

@@ -28,8 +28,8 @@ export function getRouteTitle(route: object, currentRoute?: object): string | un
  * @returns {Array.<RouteMenuItem>} Array of menu items
  */
 export function createBaseMenu(routes: any, options: {
-    qualifier: any;
-    item: any;
+    qualifier: Object;
+    item: Object;
 }): Array<RouteMenuItem>;
 /**
  * Returns menu flat (no parent children)
@@ -46,14 +46,14 @@ export function flattenMenu(menu: any): any;
  */
 export function createSectionMenu(routes: any, sectionPath: any, options: {
     includeIndex: boolean;
-    item: any;
+    item: Object;
 }): Array<RouteMenuItem>;
 /**
  * For a given array of child routes return the index
  * @param {Array} children Children array of routes
  * @returns {Object} Route
  */
-export function getChildIndexRoute(children: any[]): any;
+export function getChildIndexRoute(children: any[]): Object;
 /**
  * Creates common menu item structure from route, pulls title and weight from meta (on route or index child)
  * @param {Object} route Route
@@ -63,7 +63,7 @@ export function getChildIndexRoute(children: any[]): any;
  * @param {Function} options.indexMeta Include the routes index child's meta (merged on top of route meta)
  * @returns {RouteMenuItem} Menu item
  */
-export function createMenuItem(route: any, routePath: any, options: {
+export function createMenuItem(route: Object, routePath: Object | undefined, options: {
     modify: Function;
     indexMeta: Function;
 }): RouteMenuItem;
@@ -72,32 +72,32 @@ export function createMenuItem(route: any, routePath: any, options: {
  * @param {Object} route Route object to test
  * @returns {Boolean} Whether or not this route is static (not dynamic)
  */
-export function isStaticRoute(route: any): boolean;
+export function isStaticRoute(route: Object): boolean;
 /**
  *
  * @param {Object} route Route object to test
  * @returns {Boolean} Whether or not this route is a static base route
  */
-export function isStaticBaseRoute(route: any): boolean;
+export function isStaticBaseRoute(route: Object): boolean;
 /**
  * Function to make normal <a> behave as router links instread of page reload
  * @param {Object} router Router instance (ie src/router) to push routes to
  * @param {Object} event The event object that triggered route change (ie. onclick) pass event object
  */
-export function nativeLinkRouter(router: any, event: any): void;
+export function nativeLinkRouter(router: Object, event: Object): void;
 /**
  * Returns the child routes for base route
  * @param {Object} route Route Object
  * @returns
  */
-export function $getRouteChildren(route: any, parent?: any): any;
+export function $getRouteChildren(route: Object, parent?: Object | null): any;
 /**
  * Returns the route's parent
  * @param {Object} route Route Object
  * @param {Object} deepest By default this returns the routes parent, if deepest it will return it's base route (top level parent)
  * @return {Object|Null} Parent route, if there is no parent route for the given route this will return null
  */
-export function $getParentRoute(route: any, deepest: any): any | null;
+export function $getParentRoute(route: Object, deepest: Object): Object | null;
 /**
  * For a given $route will return all it's children as menu items,
  * using the route's meta.title property for the title. This is for sections only (routes with children)
@@ -109,10 +109,10 @@ export function $getParentRoute(route: any, deepest: any): any | null;
  * @param {Object} options.item Options for createMenuItem
  * @returns {Array.<RouteMenuItem>} Array of menu items
  */
-export function $createSectionMenu(route: any, options: {
-    parent: any;
+export function $createSectionMenu(route: Object, options: {
+    parent: Object;
     includeIndex: boolean;
-    item: any;
+    item: Object;
 }): Array<RouteMenuItem>;
 /**
  * For a given $route, this will generate a breadcrumb trail.
@@ -123,9 +123,9 @@ export function $createSectionMenu(route: any, options: {
  * @param {Object} route The Vue Router `$route` object.
  * @returns {Array.<{title: String, to: Object, current: Boolean}>} An array of breadcrumb items.
  */
-export function $createBreadcrumb(route: any): Array<{
+export function $createBreadcrumb(route: Object): Array<{
     title: string;
-    to: any;
+    to: Object;
     current: boolean;
 }>;
 /**

package/types/utils/router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../lib/utils/router.js"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;GAQG;AACH,qCAJW,MAAM,iBACN,MAAM,GACJ,MAAM,GAAC,SAAS,CAW5B;AAED;;;;;GAKG;AAEH;;;;;;;GAOG;AACH,uCANW,GAAC,WAET;IAAwB,SAAS;IACT,IAAI;CAC5B,GAAU,KAAK,CAAE,aAAa,CAAC,CAgCjC;AAED;;GAEG;AACH,4CAcC;AAED;;;;;;;;GAQG;AACH,0CAPW,GAAC,eACD,GAAC,WAET;IAAyB,YAAY;IACb,IAAI;CAC5B,GAAU,KAAK,CAAE,aAAa,CAAC,CA4BjC;AAED;;;;GAIG;AACH,yDAEC;AAED;;;;;;;;GAQG;AACH,oEAJG;IAA0B,MAAM;IACN,SAAS;CACnC,GAAU,aAAa,CAuBzB;AAED;;;;GAIG;AACH,mDAEC;AAED;;;;GAIG;AACH,uDAGC;AAED;;;;GAIG;AACH,gEAUC;AAED;;;;GAIG;AACH,iEAEC;AAED;;;;;GAKG;AACH,2DAFY,UAAW,CAUtB;AAUD;;;;;;;;;;GAUG;AACH,wDALG;IAAwB,MAAM;IACL,YAAY;IACb,IAAI;CAC5B,GAAU,KAAK,CAAE,aAAa,CAAC,CAgBjC;AAED;;;;;;;;GAQG;AACH,+CAFa,KAAK,CAAE;IAAC,KAAK,SAAS;IAAC,EAAE,MAAS;IAAC,OAAO,UAAS;CAAC,CAAC,CA6BjE"}
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../lib/utils/router.js"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;GAQG;AACH,qCAJW,MAAM,iBACN,MAAM,GACJ,MAAM,GAAC,SAAS,CAW5B;AAED;;;;;GAKG;AAEH;;;;;;;GAOG;AACH,uCANW,GAAC,WAET;IAAwB,SAAS,EAAzB,MAAM;IACU,IAAI,EAApB,MAAM;CACd,GAAU,KAAK,CAAE,aAAa,CAAC,CAgCjC;AAED;;GAEG;AACH,4CAcC;AAED;;;;;;;;GAQG;AACH,0CAPW,GAAC,eACD,GAAC,WAET;IAAyB,YAAY;IACb,IAAI,EAApB,MAAM;CACd,GAAU,KAAK,CAAE,aAAa,CAAC,CA4BjC;AAED;;;;GAIG;AACH,qDAFa,MAAM,CAIlB;AAED;;;;;;;;GAQG;AACH,sCAPW,MAAM,aACN,MAAM,uBAEd;IAA0B,MAAM;IACN,SAAS;CACnC,GAAU,aAAa,CAuBzB;AAED;;;;GAIG;AACH,qCAHW,MAAM,WAKhB;AAED;;;;GAIG;AACH,yCAHW,MAAM,WAMhB;AAED;;;;GAIG;AACH,yCAHW,MAAM,SACN,MAAM,QAYhB;AAED;;;;GAIG;AACH,yCAHW,MAAM,+BAKhB;AAED;;;;;GAKG;AACH,uCAJW,MAAM,WACN,MAAM,GACL,MAAM,OAAK,CAUtB;AAUD;;;;;;;;;;GAUG;AACH,0CAPW,MAAM,WAEd;IAAwB,MAAM,EAAtB,MAAM;IACW,YAAY;IACb,IAAI,EAApB,MAAM;CACd,GAAU,KAAK,CAAE,aAAa,CAAC,CAgBjC;AAED;;;;;;;;GAQG;AACH,yCAHW,MAAM,GACJ,KAAK,CAAE;IAAC,KAAK,SAAS;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,OAAO,UAAS;CAAC,CAAC,CA6BjE"}

package/lib/components/visualizations/progress-bar-examples.html

@@ -1,175 +0,0 @@
-
-<h2 class="h2">Basic Example</h2>
-<p>The default progress bar has no modifiers.</p>
-<div class="progress-bar">
-  <div class="progress-bar__header"><strong class="progress-bar__label">Label that is long test</strong>
-  </div>
-  <div class="progress-bar__track">
-    <div class="progress-bar__bar" style="width: 40%;"></div>
-  </div>
-  <div class="progress-bar__values">
-    <div class="progress-bar__value progress-bar__value--amount"><strong class="hidden-visually">Amount:</strong>
-      200</div>
-    <div class="progress-bar__value progress-bar__value--total"><strong class="hidden-visually">Total:</strong> 500
-    </div>
-  </div>
-</div>
-
-<div class="rule rule--light"></div>
-
-<h2 class="h2">Indeterminate Modifier</h2>
-<p>Uses the <code>.progress-bar--indeterminate</code> modifier for an animated loading state when the progress is unknown.</p>
-<div class="progress-bar progress-bar--loader progress-bar--indeterminate">
-  <div class="progress-bar__track">
-    <div class="progress-bar__bar"></div>
-  </div>
-</div>
-
-<div class="rule rule--light"></div>
-
-<h2 class="h2">Loader Style</h2>
-<p>Uses the <code>.progress-bar--loader</code> modifier for a thin loading bar.</p>
-<div class="progress-bar progress-bar--loader">
-  <div class="progress-bar__track">
-    <div class="progress-bar__bar" style="width: 65%;"></div>
-  </div>
-</div>
-
-
-<div class="rule rule--light"></div>
-
-<h2 class="h2">Completed Example</h2>
-<p>An example of a completed progress bar with an icon.</p>
-<div class="progress-bar">
-  <div class="progress-bar__header"><strong class="progress-bar__label">Progress</strong>
-    <div class="progress-bar__icon">
-      <span class="fas fa-check" aria-hidden="true"></span>
-      <span class="hidden-visually">Item Completed</span>
-    </div>
-  </div>
-  <div class="progress-bar__track">
-    <div class="progress-bar__bar" style="width: 100%;"></div>
-  </div>
-  <div class="progress-bar__values">
-    <div class="progress-bar__value progress-bar__value--amount"><strong class="hidden-visually">Amount:</strong>
-      500</div>
-    <div class="progress-bar__value progress-bar__value--total"><strong class="hidden-visually">Total:</strong> 500
-    </div>
-  </div>
-</div>
-
-<div class="rule rule--light"></div>
-
-<h2 class="h2">Deficit Example</h2>
-<p>An example of a progress bar with a deficit.</p>
-<div class="progress-bar">
-  <div class="progress-bar__header"><strong class="progress-bar__label">Progress</strong>
-    <div class="progress-bar__icon"><span class="fas fa-triangle-exclamation" aria-hidden="true"></span><span class="hidden-visually">Item Has Deficit</span></div>
-  </div>
-  <div class="progress-bar__track">
-    <div class="progress-bar__bar" style="width: 60%;"></div>
-    <div class="progress-bar__bar progress-bar__bar--deficit" style="width: 20%;"></div>
-  </div>
-  <div class="progress-bar__values">
-    <div class="progress-bar__value progress-bar__value--amount"><strong class="hidden-visually">Amount:</strong>
-      300</div>
-    <div class="progress-bar__value progress-bar__value--deficit color-status is-danger"><strong
-        class="hidden-visually">Deficit: </strong> -100</div>
-    <div class="progress-bar__value progress-bar__value--total"><strong class="hidden-visually">Total:</strong> 500
-    </div>
-  </div>
-</div>
-
-<div class="rule rule--light"></div>
-
-<h2 class="h2">Positive Style</h2>
-<p>Uses the <code>.progress-bar--positive</code> modifier.</p>
-<div class="progress-bar progress-bar--positive">
-  <div class="progress-bar__header"><strong class="progress-bar__label">Positive</strong></div>
-  <div class="progress-bar__track">
-    <div class="progress-bar__bar" style="width: 75%;"></div>
-  </div>
-</div>
-
-<div class="rule rule--light"></div>
-
-<h2 class="h2">Negative Style</h2>
-<p>Uses the <code>.progress-bar--negative</code> modifier.</p>
-<div class="progress-bar progress-bar--negative">
-  <div class="progress-bar__header"><strong class="progress-bar__label">Negative</strong></div>
-  <div class="progress-bar__track">
-    <div class="progress-bar__bar" style="width: 30%;"></div>
-  </div>
-</div>
-
-<div class="rule rule--light"></div>
-
-<h2 class="h2">Small Modifier</h2>
-<p>Uses the <code>.progress-bar--small</code> modifier. Font sizing is controlled by the parent element.</p>
-<div class="progress-bar progress-bar--small progress-bar--positive type-small">
-  <div class="progress-bar__header"><strong class="progress-bar__label type-normal">Progress</strong>
-    <div class="progress-bar__icon">
-      <span class="fas fa-check" aria-hidden="true"></span>
-      <span class="hidden-visually">Item Completed</span>
-    </div>
-  </div>
-  <div class="progress-bar__track">
-    <div class="progress-bar__bar" style="width: 100%;"></div>
-  </div>
-  <div class="progress-bar__values">
-    <div class="progress-bar__value progress-bar__value--amount"><strong class="hidden-visually">Amount:</strong>
-      500</div>
-    <div class="progress-bar__value progress-bar__value--total"><strong class="hidden-visually">Total:</strong> 500
-    </div>
-  </div>
-</div>
-
-<div class="progress-bar progress-bar--small progress-bar--deficit type-small">
-  <div class="progress-bar__header"><strong class="progress-bar__label type-normal">Progress</strong>
-    <div class="progress-bar__icon"><span class="fas fa-triangle-exclamation" aria-hidden="true"></span><span class="hidden-visually">Item Has Deficit</span></div>
-  </div>
-  <div class="progress-bar__track">
-    <div class="progress-bar__bar" style="width: 60%;"></div>
-    <div class="progress-bar__bar progress-bar__bar--deficit" style="width: 20%;"></div>
-  </div>
-  <div class="progress-bar__values">
-    <div class="progress-bar__value progress-bar__value--amount"><strong class="hidden-visually">Amount:</strong>
-      300</div>
-    <div class="progress-bar__value progress-bar__value--deficit color-status is-danger"><strong
-        class="hidden-visually">Deficit: </strong> -100</div>
-    <div class="progress-bar__value progress-bar__value--total"><strong class="hidden-visually">Total:</strong> 500
-    </div>
-  </div>
-</div>
-
-<div class="rule rule--light"></div>
-
-<h2 class="h2">Icon left with rail</h2>
-<p>Combining with rail component for icon on left</p>
-
-<div class="progress-bar progress-bar--positive">
-  <div class="rail">
-    <div class="rail__item">
-      <div class="progress-bar__icon type-large">
-        <span class="fas fa-check" aria-hidden="true"></span>
-      </div>
-    </div>
-    <div class="rail__item flex-grow">
-      <div class="progress-bar__header">
-        <strong class="progress-bar__label">Progress</strong>
-      </div>
-      <div class="progress-bar__track">
-        <div class="progress-bar__bar" style="width: 100%;"></div>
-      </div>
-      <div class="progress-bar__values">
-        <div class="progress-bar__value progress-bar__value--amount"><strong class="hidden-visually">Amount:</strong>
-          300</div>
-        <div class="progress-bar__value progress-bar__value--deficit color-status is-danger"><strong
-            class="hidden-visually">Deficit: </strong> -100</div>
-        <div class="progress-bar__value progress-bar__value--total"><strong class="hidden-visually">Total:</strong> 500
-      </div>
-    </div>
-  </div>
-</div>
-
-