Merge pull request #220 from warp-ds/spinner-component-android

Android WarpSpinner

docs/api-table.js

@@ -2258,6 +2258,23 @@ export const android = {
       ],
     ],
   },
+  Spinner: {
+    props: [
+      [
+        'modifier',
+        'Modifier',
+        'Modifier',
+        'Sets the modifier for the spinner',
+      ],
+    [
+      'size', 
+      'WarpSpinnerSize.Small <br />WarpSpinnerSize.Default <br />WarpSpinnerSize.Large',
+      'WarpSpinnerSize.Default', 
+      'Size of the spinner'
+    ],
+
+  ]
+  },
 };
 
 export const iOS = {

docs/components/spinner/android.md

@@ -0,0 +1,42 @@
+### Syntax
+
+```kotlin
+@Composable
+fun WarpSpinner(
+    modifier: Modifier = Modifier,
+    size: WarpSpinnerSize = WarpSpinnerSize.Default,
+)
+```
+
+
+### Visual options
+There are three supported sizes for the Spinner.
+```kotlin
+WarpSpinnerSize.Small
+WarpSpinnerSize.Default
+WarpSpinnerSize.Large
+```
+
+The default size is WarpSpinnerSize.Default
+
+```kotlin
+WarpSpinner(size = WarpSpinnerSize.Small)
+WarpSpinner()
+WarpSpinner(size = WarpSpinnerSize.Large)
+```
+
+### Legacy support
+Supported in xml layouts
+
+```xml
+<com.schibsted.nmp.warp.components.legacy.WarpSpinnerView
+    android:id="@+id/spinner_large"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:padding="@dimen/space2"
+    app:spinnerSize="large"/>
+```
+
+### Parameters
+
+<api-table type=android component="Spinner" />

docs/components/spinner/index.md

@@ -1,16 +1,17 @@
 <script setup>
   import iOS from './ios.md';
+  import Android from './android.md';
 </script>
 
 # Spinner
 
 A spinner is an animated spinning icon that informs users about the loading of content.
+Use a Spinner when confirming a change has been made or a task is being processed.
+
 
-::: warning iOS only
 For the web implementation of a "spinner", see [CSS - Animation - Spinner](/css/animation#spinner).
-:::
 
-<components-status ios='released' />
+<components-status ios='released' android='released' />
 
 ## Example
 
@@ -22,6 +23,13 @@ For the web implementation of a "spinner", see [CSS - Animation - Spinner](/css/
 
 <component-questions />
 
-## iOS implementation
+## Frameworks
 
-<iOS />
+<tabs-content> 
+  <template #android>
+    <android />
+  </template>
+  <template #iOS>
+    <iOS />
+  </template>
+</tabs-content>