Use MDX Badge component for status labels (#210)

* Use MDX Badge component for status labels

* Add Badge component for Open Source and Premium labels in documentation

* feat(*): updating to 0.0.14

---------

Co-authored-by: Stamen Stoychev <sstoychev@infragistics.com>

Author: viktorkombov

docs/angular/package.json

@@ -37,7 +37,7 @@
   "dependencies": {
     "astro": "^6.1.6",
     "docs-template": "file:../../",
-    "igniteui-astro-components": "0.0.13",
+    "igniteui-astro-components": "0.0.14",
     "sharp": "^0.34.2"
   },
   "devDependencies": {

docs/angular/src/content/en/components/charts/features/chart-axis-types.mdx

@@ -50,7 +50,6 @@ The `CategoryYAxis` works very similarly to the `CategoryXAxis` described above,
 
 The `NumericXAxis` treats its data as continuously varying numerical data items. Labels on this axis are placed horizontally along the X-Axis. The location of the `NumericXAxis` labels depends on the `XMemberPath` property of the various [Scatter Series](../types/scatter-chart.md) that it supports if combined with a `NumericYAxis`. Alternatively, if combined with the `CategoryXAxis`, these labels will be placed corresponding to the `ValueMemberPath` of the `BarSeries`, `StackedBarSeries`, and `Stacked100BarSeries`.
 
-
 The `NumericXAxis` is compatible with the following type of series:
 
 - `BarSeries`

docs/angular/src/content/en/components/charts/features/chart-data-annotations.mdx

@@ -8,9 +8,10 @@ namespace: Infragistics.Controls.Charts
 ---
 import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
 import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
+import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
 
 
-# Angular Chart Data Annotations <label>PREVIEW</label>
+# Angular Chart Data Annotations <Badge variant="preview" />
 
 In the Angular chart, the data annotation layers allow you to annotate data plotted in Data Chart with sloped lines, vertical/horizontal lines (aka axis slices), vertical/horizontal strips (targeting specific axis), rectangles, and even parallelograms (aka bands). With data-binding supported, you can create as many annotations as you want to customize your charts. Also, you can combine different annotation layers and you can overlay text inside of plot area to annotated important events, patterns, and regions in your data.
 

docs/angular/src/content/en/components/charts/features/chart-markers.mdx

@@ -1,9 +1,9 @@
 ---
 title: Angular Chart Markers | Data Visualization | Infragistics
 _description: Infragistics' Angular Chart Markers
-_keywords: Angular Charts, Markers, Marker Size, Infragistics
+_keywords: Angular Charts, Markers, Infragistics
 _license: commercial
-mentionedTypes: ["CategoryChart", "CategoryChartType", "MarkerType", "MarkerSeries", "ScatterLineSeries", "ScatterSplineSeries", "ScatterSeries", "LineSeries", "SplineSeries", "MarkerAutomaticBehavior", "SeriesViewer"]
+
 namespace: Infragistics.Controls.Charts
 ---
 import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
@@ -24,48 +24,6 @@ The colors of the markers are also managed by setting the <ApiLink pkg="charts"
 <Sample src="/charts/category-chart/marker-options" height={500} alt="Angular Configuration Options Example" />
 
 
-<div class="divider--half"></div>
-
-## Angular Chart Marker Size
-
-You can control the exact device-independent pixel dimensions of data point markers by setting the `MarkerSize` property on any series that supports markers. This gives you precise control over how large markers appear on screen, regardless of the marker template or style being used.
-
-By default, marker sizing is determined by the series marker template. When you set `MarkerSize` to a specific numeric value, all markers in that series render at that exact device-independent pixel width and height. Setting `MarkerSize` back to `NaN` restores the default template-driven sizing.
-
-The `MarkerSize` property is available on all series types that derive from `MarkerSeries`, including `LineSeries`, `SplineSeries`, `AreaSeries`, `ColumnSeries`, `ScatterSeries`, `ScatterLineSeries`, `ScatterSplineSeries`, and polar/radial series types.
-
-The following code examples show how to set `MarkerSize` to 30 device-independent pixels on a `ScatterLineSeries` in the `XamDataChart` control:
-
-
-
-
-
-
-
-To reset markers to their default template-driven size, set `MarkerSize` to `NaN` (or remove the attribute in markup):
-
-
-
-
-
-The following sample demonstrates `MarkerSize` on scatter series with an interactive editor:
-
-<Sample src="/charts/data-chart/scatter-marker-options" height={500} alt="Angular Chart Marker Size Example" />
-
-<DocsAside type="note">
-For `BubbleSeries`, the `MarkerSize` property does not override the bubble radius, which is controlled by the radius data column and the `RadiusScale`. Bubble sizes remain entirely driven by the data and scale configuration.
-</DocsAside>
-
-<div class="divider--half"></div>
-
-## Angular Chart Checkmark Marker Type
-
-The Ignite UI for Angular charts include a `Checkmark` option in the `MarkerType` enum. This marker renders a V-shaped checkmark icon inside a circle on data points in your chart.
-
-You can apply the `Checkmark` marker type to an individual series by setting its `MarkerType` property to `MarkerType.Checkmark`. To use the checkmark shape for all series in the chart simultaneously, set the chart's `MarkerAutomaticBehavior` property to `MarkerAutomaticBehavior.Checkmark`.
-
-The `SeriesViewer.CheckmarkMarkerTemplate` property defines the marker template used for series with a checkmark marker type, and can be used to customize its appearance across the chart.
-
 <div class="divider--half"></div>
 
 ## Angular Chart Marker Templates

docs/angular/src/content/en/components/charts/features/chart-overlays.mdx

@@ -8,6 +8,7 @@ namespace: Infragistics.Controls.Charts
 ---
 import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
 import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
+import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
 
 
 # Angular Chart Overlays
@@ -65,7 +66,7 @@ The following sample demonstrates usage of the different <ApiLink pkg="charts" t
 
 You can also plot built-in financial overlays and indicators in Angular [Stock Chart](../types/stock-chart.md).
 
-## Chart Overlay Text <label>PREVIEW</label>
+## Chart Overlay Text <Badge variant="preview" />
 
 The Angular <ApiLink pkg="charts" type="ValueOverlay" />, <ApiLink pkg="charts" type="ValueLayer" />, and all Data Annotation Layers can render custom overlay text inside plot area of the DataChart component. You can use this overlay text to annotate important events (e.g. company quarter reports) on x-axis or important values on y-axis in relationship to the layers.
 

docs/angular/src/content/en/components/charts/features/chart-user-annotations.mdx

@@ -12,9 +12,10 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 import { Image } from 'astro:assets';
 import dataChartUserAnnotationCreate from '@xplat-images/charts/data-chart-user-annotation-create.gif';
 import dataChartUserAnnotationDelete from '@xplat-images/charts/data-chart-user-annotation-delete.gif';
+import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
 
 
-# Angular Chart User Annotation Layer <label>PREVIEW</label>
+# Angular Chart User Annotation Layer <Badge variant="preview" />
 
 In Ignite UI for Angular, you can annotate the <ApiLink pkg="charts" type="DataChart" /> with slice, strip, and point annotations at runtime using the user annotations feature. This allows the end user to add more details to the plot such as calling out single important events such as company quarter reports by using the slice annotation or events that have a duration by using the strip annotation. You can also call out individual points on the plotted series by using the point annotation or any combination of these three.
 

docs/angular/src/content/en/components/dashboard-tile.mdx

@@ -10,9 +10,10 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
 import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 import { Image } from 'astro:assets';
 import dashboardTileToolbar from '@xplat-images/dashboard-tile-toolbar.png';
+import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
 
 
-# Angular Dashboard Tile <label>PREVIEW</label>
+# Angular Dashboard Tile <Badge variant="preview" />
 
 The Angular Dashboard Tile is a automatic data visualization component which determines via analysis of a DataSource collection/array or single data point what would be the most appropriate visualization to display. It then also provides a further suite of tools in its embedded <ApiLink pkg="layouts" type="Toolbar" /> that let you alter the visualization that is presented in a variety of ways.