@gits-id/spinner - npm Package Compare versions

Comparing version 0.12.0-alpha.1 to 0.12.0-alpha.3

package.json

 {
   "name": "@gits-id/spinner",
-  "version": "0.12.0-alpha.1",
+  "version": "0.12.0-alpha.3",
   "description": "GITS Spinner Component",
@@ -20,3 +20,3 @@ "scripts": {
   "devDependencies": {
-    "@gits-id/tailwind-config": "^0.12.0-alpha.1",
+    "@gits-id/tailwind-config": "^0.12.0-alpha.3",
     "@gits-id/utils": "^0.12.0-alpha.1",
@@ -33,3 +33,3 @@ "@vue/test-utils": "^2.0.0-rc.17",
   "types": "./dist/types/index.d.ts",
-  "gitHead": "c1a71e0b5936d8d181c740d9836fddd46351215f",
+  "gitHead": "f260e2ae5a0157d734617d5c7cd39f39753570f4",
   "dependencies": {
@@ -36,0 +36,0 @@ "vue": "^3.2.33"

README.md

@@ -39,3 +39,3 @@ # GITS Spinner Component
 
-View `Spinner` documentation [here](https://gits-ui.web.app/?path=/story/components-spinner--default).
+View `Spinner` documentation [here](https://gitsindonesia.github.io/ui-component/components/spinner.html).
 
@@ -42,0 +42,0 @@ ## License

src/VSpinner.stories.js

@@ -40,23 +40,44 @@ import VSpinner from './VSpinner.vue';
 
-export const XSmall = Template.bind({});
-XSmall.args = {
-  xSmall: true,
-};
-XSmall.storyName = 'Extra Small';
-XSmall.parameters = {
-  docs: {
-    source: {
-      code: '<v-spinner color="primary" x-small />',
-    },
+export const Sizes = (args) => ({
+  components: {
+    VSpinner,
   },
-};
+  setup() {
+    const sizes = ['default', 'xSmall', 'small', 'large', 'xLarge'];
 
-export const Small = Template.bind({});
-Small.args = {
-  small: true,
-};
-Small.parameters = {
+    const nuArgs = {
+      args: sizes.map((e) => {
+        if (e === 'default') {
+          return args;
+        }
+
+        return {
+          ...args,
+          [`${e}`]: true,
+        };
+      }),
+      availableSizes: sizes,
+    };
+
+    return {args: nuArgs};
+  },
+  template: `
+    <div class="flex gap-4">
+      <div v-for="(size, idx) in args.availableSizes">
+        <p class="mb-2">{{size}}</p>
+        <v-spinner v-bind="args.args[idx]"/>
+      </div>
+    </div>
+  `,
+});
+Sizes.parameters = {
   docs: {
     source: {
-      code: '<v-spinner color="primary" small />',
+      code: `
+<v-spinner />
+<v-spinner xSmall />
+<v-spinner small />
+<v-spinner large />
+<v-spinner xLarge />
+      `,
     },
@@ -66,25 +87,49 @@ },
 
-export const Large = Template.bind({});
-Large.args = {
-  large: true,
-};
-Large.parameters = {
-  docs: {
-    source: {
-      code: '<v-spinner color="primary" large />',
-    },
+export const Colors = (args) => ({
+  components: {
+    VSpinner,
   },
-};
+  setup() {
+    const colors = [
+      'default',
+      'primary',
+      'secondary',
+      'info',
+      'success',
+      'warning',
+      'error',
+      'dark',
+    ];
 
-export const XLarge = Template.bind({});
-XLarge.args = {
-  xLarge: true,
-};
-XLarge.storyName = 'Extra Large';
-XLarge.parameters = {
+    const nuArgs = {
+      args,
+      availableColors: colors,
+    };
+
+    return {args: nuArgs};
+  },
+  template: `
+    <div class="flex gap-4">
+      <div v-for="color in args.availableColors">
+        <p class="mb-2">{{color}}</p>
+        <v-spinner v-bind="args.args" :color="color" :key="color"/>
+      </div>
+    </div>
+  `,
+});
+Colors.parameters = {
   docs: {
     source: {
-      code: '<v-spinner color="primary" x-large />',
+      code: `
+<v-spinner />
+<v-spinner color="primary" />
+<v-spinner color="secondary" />
+<v-spinner color="info" />
+<v-spinner color="success" />
+<v-spinner color="warning" />
+<v-spinner color="error" />
+<v-spinner color="dark" />
+      `,
     },
   },
 };

No alert changes

Improved metrics

Total package byte prevSize

23038

3.96%

Lines of code

453

10.22%

No dependency changes