break up progress bar types using discriminating unions

src/progress-bar/interfaces.ts

@@ -3,34 +3,12 @@
 import { BaseComponentProps } from '../internal/base-component';
 import { NonCancelableEventHandler } from '../internal/events';
 
-export interface ProgressBarProps extends BaseComponentProps {
+interface BaseProgressBarProps extends BaseComponentProps {
   /**
    * Indicates the current progress as a percentage. The value must be between 0 and 100. Decimals are rounded.
    */
   value?: number;
 
-  /**
-   * Specifies the progress type.
-   *
-   * @defaultValue 'percentage'
-   */
-  type?: ProgressBarProps.ContentType;
-
-  /**
-   * Specifies the maximum value of the progress when type ratio is selected.
-   *
-   * @defaultValue 100
-   */
-  maxValue?: number;
-
-  /**
-   * Control localization of the progress bar value.
-   *
-   * @defaultValue If type === `percentage`, `${value}%`
-   * @defaultValue If type === `ratio`, `${value} of ${maxValue}`
-   */
-  ariaValueText?: string;
-
   /**
    * Specifies the status of the progress bar. You can set it to one of the following:
    *
@@ -91,6 +69,41 @@ export interface ProgressBarProps extends BaseComponentProps {
   onResultButtonClick?: NonCancelableEventHandler;
 }
 
+interface PercentageProgressBarProps extends BaseProgressBarProps {
+  /**
+   * Specifies the progress type.
+   *
+   * @defaultValue 'percentage'
+   */
+  type?: 'percentage';
+}
+
+interface RatioProgressBarProps extends BaseProgressBarProps {
+  /**
+   * Specifies the progress type.
+   *
+   * @defaultValue 'percentage'
+   */
+  type: 'ratio';
+
+  /**
+   * Specifies the maximum value of the progress when type ratio is selected.
+   *
+   * @defaultValue 100
+   */
+  maxValue?: number;
+
+  /**
+   * Control localization of the progress bar value.
+   *
+   * @defaultValue If type === `percentage`, `${value}%`
+   * @defaultValue If type === `ratio`, `${value} of ${maxValue}`
+   */
+  ariaValueText?: string;
+}
+
+export type ProgressBarProps = PercentageProgressBarProps | RatioProgressBarProps;
+
 export namespace ProgressBarProps {
   export type Status = 'in-progress' | 'success' | 'error';
   export type Variant = 'standalone' | 'flash' | 'key-value';