feat: create spinner stories

packages/core/src/components/spinner/stories/spinner.args.ts

@@ -0,0 +1,29 @@
+export const SpinnerStoryArgs = {
+  decorators: [],
+  parameters: {
+    actions: {
+      handles: [],
+    },
+    docs: {
+      description: {
+        component:
+          'Spinners are inline block elements that usually appear near another element. Read the [Ionic documentation](https://ionicframework.com/docs/api/Spinner) for more information about this component.',
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['primary', 'secondary', 'dark'],
+      defaultValue: { summary: 'primary' },
+      description:
+        'The type of the Spinner, the component will receive the color according to its type.',
+    },
+    size: {
+      control: 'text',
+      defaultValue: { summary: 20 },
+      description:
+        'The type of the Spinner, the component will receive the color according to its type.',
+    },
+  },
+}

packages/core/src/components/spinner/stories/spinner.core.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from '@storybook/web-components'
+import { html } from 'lit'
+
+import { SpinnerStoryArgs } from './spinner.args'
+
+export default {
+  title: 'Components/Spinner',
+  ...SpinnerStoryArgs,
+} as Meta
+
+const createSpinner = (args) => {
+  return html`<atom-spinner type="${args.type}" />`
+}
+
+export const Primary: StoryObj = {
+  render: (args) => createSpinner(args),
+  args: {
+    type: 'primary',
+  },
+}
+
+export const Secondary: StoryObj = {
+  render: (args) => createSpinner(args),
+  args: {
+    type: 'secondary',
+  },
+}
+
+export const Dark: StoryObj = {
+  render: (args) => createSpinner(args),
+  args: {
+    type: 'dark',
+  },
+}

packages/core/src/components/spinner/stories/spinner.react.stories.tsx

@@ -0,0 +1,34 @@
+import { AtomSpinner } from '@juntossomosmais/atomium/react'
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import { SpinnerStoryArgs } from './spinner.args'
+
+export default {
+  title: 'Components/Spinner',
+  component: AtomSpinner,
+  ...SpinnerStoryArgs,
+} as Meta
+
+const createSpinner = (args) => <AtomSpinner color={args.color} />
+
+export const Primary: StoryObj = {
+  render: (args) => createSpinner(args),
+  args: {
+    type: 'primary',
+  },
+}
+
+export const Secondary: StoryObj = {
+  render: (args) => createSpinner(args),
+  args: {
+    type: 'secondary',
+  },
+}
+
+export const Dark: StoryObj = {
+  render: (args) => createSpinner(args),
+  args: {
+    type: 'dark',
+  },
+}

packages/core/src/components/spinner/stories/spinner.vue.stories.tsx

@@ -0,0 +1,38 @@
+import { AtomSpinner } from '@juntossomosmais/atomium/vue'
+import { Meta, StoryObj } from '@storybook/vue3'
+
+import { SpinnerStoryArgs } from './spinner.args'
+
+export default {
+  title: 'Components/Spinner',
+  ...SpinnerStoryArgs,
+} as Meta
+
+const createSpinner = (args) => ({
+  components: { AtomSpinner },
+  setup() {
+    return { args }
+  },
+  template: `<AtomSpinner type="${args.type}"/>`,
+})
+
+export const Primary: StoryObj = {
+  render: (args) => createSpinner(args),
+  args: {
+    type: 'primary',
+  },
+}
+
+export const Secondary: StoryObj = {
+  render: (args) => createSpinner(args),
+  args: {
+    type: 'secondary',
+  },
+}
+
+export const Dark: StoryObj = {
+  render: (args) => createSpinner(args),
+  args: {
+    type: 'dark',
+  },
+}