docs: migrate InlineSpinner

Author: Nikolai Lopin

src/components/InlineSpinner/docs/InlineSpinner.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { InlineSpinner } from '../InlineSpinner';
+
+const meta: Meta = {
+    title: 'Components/InlineSpinner',
+    component: InlineSpinner,
+    argTypes: {
+        size: {
+            control: 'radio',
+            options: ['medium', 'small']
+        }
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InlineSpinner>;
+
+export const Default: Story = {};
+
+export const Small: Story = {
+    args: {
+        size: 'small'
+    }
+};

src/components/InlineSpinner/docs/InlineSpinner.mdx renamed to src/components/InlineSpinner/docs/InlineSpinner.storybook.mdx

@@ -1,18 +1,14 @@
----
-name: InlineSpinner
-menu: Components
-route: /components/inline-spinner
----
-
-import { Playground } from 'docz';
+import { Meta, ArgsTable, Primary, Stories } from '@storybook/blocks';
 import { InlineSpinner } from '../InlineSpinner';
-import { Colors } from '../../../essentials';
-import { InlineSpinnerPropsTable } from './InlineSpinnerPropsTable';
-import { Combination } from '../../../docs/Combination';
 import { StyledSystemLinks } from '../../../docs/StyledSystemLinks';
+import * as InlineSpinnerStories from './InlineSpinner.stories';
+
+<Meta of={InlineSpinnerStories} />
 
 # InlineSpinner
 
+<Primary />
+
 A spinner is a visual indicator of an ongoing, user-initiated process. Place the spinner where you want to focus users’
 attention when the process completes. Provide a brief description of the process, for example, “Loading…”. Inline spinners
 are used for showing the progress of an operation related to a specific component (buttons, etc...) and the default size
@@ -23,18 +19,8 @@ more than 200 milliseconds. Additionally it is recommended that the verb on the
 
 ## Properties
 
-<InlineSpinnerPropsTable />
-<br />
-<StyledSystemLinks component="InlineSpinner" supportedProps={['margin']} />
+<ArgsTable of={InlineSpinner} />
 
-## Examples
-
-<Playground>
-    <InlineSpinner />
-</Playground>
-
-## Combinations
+<StyledSystemLinks component="InlineSpinner" supportedProps={['margin']} />
 
-<Combination size={["small", "medium"]}>
-    {(props, i) => <InlineSpinner key={i} {...props} />}
-</Combination>
+<Stories />