feat: add custom size to spinner

src/components/Spinner/WSpinner.spec.ts

@@ -4,7 +4,11 @@ import WSpinner from './WSpinner.vue'
 
 describe('WSpinner', () => {
   it('renders properly', () => {
-    const wrapper = mount(WSpinner)
+    const wrapper = mount(WSpinner, {
+      props: {
+        size: '16px'
+      }
+    })
 
     expect(wrapper.element).toMatchSnapshot()
   })

src/components/Spinner/WSpinner.stories.ts

@@ -18,6 +18,9 @@ export const Default: Story = {
     setup() {
       return { args }
     },
-    template: `<WSpinner />`
+    template: `<WSpinner v-bind="args" />`,
+    args: {
+      size: '30px'
+    }
   })
 }

src/components/Spinner/WSpinner.vue

@@ -1,9 +1,25 @@
 <template>
-  <div role="status">
-    <Spinner aria-hidden="true" class="w-8 h-8 text-gray-100 animate-spin fill-wit-blue-500" />
+  <div role="status" class="spinner">
+    <Spinner
+      aria-hidden="true"
+      class="w-full h-full text-gray-100 animate-spin fill-wit-blue-500"
+    />
     <span class="sr-only">Loading...</span>
   </div>
 </template>
 <script lang="ts" setup>
 import Spinner from '@/assets/svg/spinner.svg?component'
+defineProps({
+  size: {
+    type: String,
+    default: '40px'
+  }
+})
 </script>
+
+<style lang="scss">
+.spinner {
+  width: v-bind(size);
+  height: auto;
+}
+</style>

src/components/Spinner/__snapshots__/WSpinner.spec.ts.snap

@@ -2,11 +2,12 @@
 
 exports[`WSpinner > renders properly 1`] = `
 <div
+  class="spinner"
   role="status"
 >
   <svg
     aria-hidden="true"
-    class="w-8 h-8 text-gray-100 animate-spin fill-wit-blue-500"
+    class="w-full h-full text-gray-100 animate-spin fill-wit-blue-500"
     fill="none"
     viewBox="0 0 100 101"
     xmlns="http://www.w3.org/2000/svg"