Update src/content/design-system/components/progress-indicator

apps/site/src/content/design-system/components/progress-indicator/code/development-examples/content.mdoc

@@ -1,12 +1,12 @@
-### Progress Indicator
+### Progress indicator
 
 ```tsx
 () => {
   return <ProgressIndicator />;
 };
 ```
 
-### Progress Indicator Sizes
+### Sizes
 
 ```tsx
 () => {
@@ -20,14 +20,14 @@
 };
 ```
 
-### Inverted Progress Indicator
+### Dark background
 
 ```tsx
 () => {
   return (
     <div className="bg-black w-fit">
       {(['xsmall', 'small', 'medium', 'large', 'xlarge'] as const).map(size => (
-        <ProgressIndicator size={size} inverted className="mr-2" />
+        <ProgressIndicator size={size} color={'white'} className="mr-2" />
       ))}
     </div>
   );

apps/site/src/content/design-system/components/progress-indicator/design/user-experience/content.mdoc

@@ -0,0 +1 @@
+Use this component within loading patterns. Predominantly the user experience direction is dictated by the pattern that contains it.

apps/site/src/content/design-system/components/progress-indicator/design/visual-design/content.mdoc

@@ -0,0 +1 @@
+Simplicity is the key design requirement for this component. It has an intentional minimal form and simple animation, just enough to capture the essence of its meaning. This ensures readability and clarity even at small sizes. It also optimises the file size.

apps/site/src/content/design-system/components/progress-indicator/design/where-is-this-available/content.mdoc

@@ -0,0 +1,8 @@
+{% shortCode name="where-is-this-available" /%}
+
+{% availabilityContent
+   availableGel="available"
+   availableMesh="available"
+   availableLegacyWdp="older-version-available"
+   alternativeMesh="Loader"
+   alternativeLegacyWdp="Loader" /%}

apps/site/src/content/design-system/components/progress-indicator/index.yaml

@@ -20,14 +20,11 @@ design:
     noTitle: false
     noDemo: false
   - title:
-      name: Dos and don’ts
-      slug: dos-and-donts
+      name: Where is this available?
+      slug: where-is-this-available
     noTitle: false
     noDemo: false
 accessibility:
-  - title:
-      name: Colour impairment demonstration
-      slug: colour-impairment-demonstration
   - title:
       name: Accessibility features
       slug: accessibility-features