feat(visualization-bar): add new components

Adds:
- VisualizationBar
- ProgressBar (feature flags)

docs/content/docs/progress-bar/api/auto.um

@@ -3,10 +3,18 @@
   @description
     Updated the progressbar background color to add more contrast
 
-@prototype hx.ProgressBar
+@prototype ProgressBarV1
+  @deprecated nextReleaseVersion
+    @description
+      Replaced by @code[ProgressBarV2].
+
+      Pass @code[featureFlags.useUpdatedClass: true] in the constructor options to create a new style progress bar.
+
   @description
     Create one of these for each progress bar in your page. This object provides methods to get and set the value of the progressbar.
 
+    This prototype is not exposed directly. Use @code[hx.ProgressBar].
+
   @constructor
     @removed 0.13.0
       @description
@@ -171,6 +179,229 @@
         @default
           false
 
+@prototype ProgressBarV2
+  @added nextReleaseVersion
+
+  @description
+    This prototype is not exposed directly. Use @code[hx.ProgressBar] with the @code[featureFlags.useUpdatedClass: true] option.
+
+  @constructor
+    @arg selector [String/HTMLElement/Selection]
+      @description
+        The selector to create the progress bar inside.
+
+    @arg? options [Object]
+      @property title [String]
+        @description
+          Sets the title to display above the progress bar
+        @default: @code[undefined]
+
+      @property breakdown [String]
+        @description
+          Sets the 'breakdown text' to display below the progress bar.
+          This is intended to explain what the progress bar and its segments are showing.
+
+        @default: @code[undefined]
+
+      @property plan [Number]
+        @description
+          Sets the plan for the progress bar. This is the target number used to indicate the total progress.
+
+          It is shown above and to the right of the progress bar like @code[progress / plan] (e.g. @code[100 / 1200])
+
+        @default: @code[0]
+
+      @property inProgress [Number]
+        @description
+          The current number of items that are being actioned but have not been completed.
+
+        @default: @code[0]
+
+      @property done [Number]
+        @description
+          The number of completed items.
+
+          This number will be shown next to the plan. It is shown above and to the right of
+          the progress bar like @code[progress / plan] (e.g. @code[100 / 1200])
+
+          The @code[done] amount can be greater than the planned amount (e.g. when you have completed more than you planned to complete)
+
+        @default: @code[0]
+
+      @property hidePlan [Boolean]
+        @description
+          Whether to hide the plan and just show the progress bar with title/breakdown text.
+
+        @default: @code[false]
+
+      @property compact [Boolean]
+        @description
+          Whether the progress bar should be compact. In this mode, the bar will be shorter and not display numbers on the segments.
+
+        @default: @code[false]
+
+      @property disabled [Boolean]
+        @description
+          Whether the progress bar is disabled. This can be used when there is no data or when a bar is not applicable.
+        @default: @code[false]
+
+  @method title
+    @description
+      Gets the title option
+    @returns [String]
+
+  @method title
+    @description
+      Sets the title option
+
+    @arg title [String]
+
+    @returns ProgressBar
+      @description
+        This ProgressBar
+
+  @method breakdown
+    @description
+      Gets the breakdown option
+    @returns [String]
+
+  @method breakdown
+    @description
+      Sets the breakdown option
+
+    @arg breakdown [String]
+
+    @returns ProgressBar
+      @description
+        This ProgressBar
+
+  @method plan
+    @description
+      Gets the plan option
+    @returns [Number]
+
+  @method plan
+    @description
+      Sets the plan option
+
+    @arg plan [Number]
+
+    @returns ProgressBar
+      @description
+        This ProgressBar
+
+  @method inProgress
+    @description
+      Gets the inProgress option
+
+    @returns [Number]
+
+  @method inProgress
+    @description
+      Sets the inProgress option
+
+    @arg inProgress [Number]
+
+    @returns ProgressBar
+      @description
+        This ProgressBar
+
+  @method done
+    @description
+      Gets the done option
+
+    @returns [Number]
+
+  @method done
+    @description
+      Sets the done option
+
+    @arg done [Number]
+
+    @returns ProgressBar
+      @description
+        This ProgressBar
+
+  @method hidePlan
+    @description
+      Gets the hidePlan option
+
+    @returns [Boolean]
+
+  @method hidePlan
+    @description
+      Sets the hidePlan option
+
+    @arg hidePlan [Boolean]
+
+    @returns ProgressBar
+      @description
+        This ProgressBar
+
+  @method compact
+    @description
+      Gets the compact option
+
+    @returns [Boolean]
+
+  @method compact
+    @description
+      Sets the compact option
+
+    @arg compact [Boolean]
+
+    @returns ProgressBar
+      @description
+        This ProgressBar
+
+  @method disabled
+    @description
+      Gets the disabled option
+
+    @returns [Boolean]
+
+  @method disabled
+    @description
+      Sets the disabled option
+
+    @arg disabled [Boolean]
+
+    @returns ProgressBar
+      @description
+        This ProgressBar
+
+@prototype hx.ProgressBar
+  @description
+    Creates a Progress Bar element.
+
+  @constructor
+    @collapsed false
+    @arg selector [String/HTMLElement/Selection]
+      @description
+        The selection to create the progress bar inside.
+
+    @arg? options [Object]
+      @collapsed false
+      @description
+        The options to use when creating the progress bar.
+
+        There are two classes used internally, @code[ProgressBarV1] and @code[ProgressBarV2].
+
+        By default, this will create a @code[ProgressBarV1]. If passing
+        @code[featureFlags.useUpdatedClass: true] in the options, a @code[ProgressBarV2] will be created.
+
+        The other available options differ for each of the two prototypes. See their constructors for details.
+
+      @property featureFlags [Object]
+        @added nextReleaseVersion
+          @description
+            Added featureFlags to enable a new progress bar class
+        @collapsed false
+        @property useUpdatedClass [Boolean]
+          @collapsed false
+          @description
+            Whether to use the ProgressBarV2 prototype instead of ProgressBarV1
+
 @class hx-progressbar
   @deprecated 0.9.0
     @description
@@ -260,8 +491,24 @@
     Creates a new ProgressBar set up on a detached element, wrapped in a selection
 
   @arg? options [Object]
+    @collapsed false
     @description
-      See the options object for constructing ProgressBar
+      See the options object for constructing ProgressBar.
+
+      By default, this will create a @code[ProgressBarV1]. If passing
+      @code[featureFlags.useUpdatedClass: true] in the options, a @code[ProgressBarV2] will be created.
+
+      The other available options differ for each of the two prototypes. See their constructors for details.
+
+    @property featureFlags [Object]
+      @added nextReleaseVersion
+        @description
+          Added featureFlags to enable a new progress bar class
+      @collapsed false
+      @property useUpdatedClass [Boolean]
+        @collapsed false
+        @description
+          Whether to use the ProgressBarV2 prototype instead of ProgressBarV1
 
   @returns [Selection]
     @description

docs/content/docs/progress-bar/examples/auto.um

@@ -98,3 +98,52 @@
         new hx.ProgressBar('#pb6', {value: 0.67})
         new hx.ProgressBar('#pb7', {value: 0.75})
 
+
+@version nextReleaseVersion
+  @examples
+    @example
+      @@html
+        <div id="progressBars" class="hx-flag-typography"></div>
+
+      @@js
+        hx.select('#progressBars').set([
+          hx.div('hx-header-small').text('Standard Progress Bar'),
+          hx.progressBar({
+            featureFlags: { useUpdatedClass: true },
+            title: 'Title here',
+            breakdown: 'Breakdown Text can go here',
+            plan: 78,
+            done: 38,
+          }),
+          hx.div('spacer-for-docs hx-pad hx-margin'),
+          hx.div('hx-header-small').text('Compact Progress Bar'),
+          hx.progressBar({
+            featureFlags: { useUpdatedClass: true },
+            title: 'Freezer (eaches)',
+            breakdown: 'Breakdown Text can go here',
+            plan: 78,
+            done: 38,
+            compact: true,
+          }),
+        ]);
+
+    @example
+      @@html
+        <div class="hx-header-medium">ProgressBarV1</div>
+        <div id="pb1" class="hx-progress-bar"></div>
+        <div id="pb2" class="hx-progress-bar hx-positive"></div>
+        <div id="pb3" class="hx-progress-bar hx-warning"></div>
+        <div id="pb4" class="hx-progress-bar hx-negative"></div>
+        <div id="pb5" class="hx-progress-bar hx-info"></div>
+        <div id="pb6" class="hx-progress-bar hx-complement"></div>
+        <div id="pb7" class="hx-progress-bar hx-contrast"></div>
+
+      @@js
+        new hx.ProgressBar('#pb1', {value: 0.25})
+        new hx.ProgressBar('#pb2', {value: 0.33})
+        new hx.ProgressBar('#pb3', {value: 0.42})
+        new hx.ProgressBar('#pb4', {value: 0.5})
+        new hx.ProgressBar('#pb5', {value: 0.58})
+        new hx.ProgressBar('#pb6', {value: 0.67})
+        new hx.ProgressBar('#pb7', {value: 0.75})
+

docs/content/docs/visualization-bar/api.um

@@ -0,0 +1,2 @@
+@api Visualization Bar
+  @inline api/*.um

docs/content/docs/visualization-bar/api/VisualizationBar.um

@@ -0,0 +1,22 @@
+@prototype hx.VisualizationBar
+  @collapsed false
+  @added nextReleaseVersion
+  @description
+
+  @constructor
+    @collapsed false
+    @arg selector [String/HTMLElement/Selection]
+      The selector to create the visualization bar inside
+
+    @arg options [Object]
+      @collapsed false
+      @inline ./options/*.um
+
+@function hx.visualizationBar
+  @collapsed false
+  @added nextReleaseVersion
+  @description
+    Create a visualization bar component wrapped in a selection
+
+  @arg options [Object]
+    @inline ./options/*.um

docs/content/docs/visualization-bar/api/options/breakdown.um

@@ -0,0 +1,4 @@
+@property? breakdown [String]
+  @description
+    The 'breakdown text' to display below the visualization bar. This can be used
+    to explain what each segment is, or how the calculation is performed.

docs/content/docs/visualization-bar/api/options/segments.um

@@ -0,0 +1,39 @@
+@property segments [Array[Segment]]
+  @description
+    The array of segments to display. At least one segment is required to render a
+    visualization bar. Segments can also be shown with a zero value.
+
+  @extra
+    @object Segment
+      @property id [String]
+        @description
+          A unique identifier string used to ensure segments are rendered in the correct order
+
+      @property? label [String]
+        @description
+          The text label shown below the segment. If a label is provided, the percentage of the
+          total for the segment is also shown.
+
+          If no label is provided, only the count is shown on the segment.
+
+      @property count [Number]
+        @description
+          The number to display in this segment. A count is required for each segment,
+          however it can be @code[0]
+
+      @property? type [String]
+        @description
+          The type (i.e. colour) of the segment.
+
+          Available types are:
+
+          @list
+            @item: default (or @code[undefined] type)
+            @item: light
+            @item: medium
+            @item: dark
+            @item: danger
+            @item: warning
+            @item: done
+            @item: in-progress
+            @item: todo