change name stack story and spacing.mdx

stories/spacing.mdx

@@ -0,0 +1,50 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Style/Spacing" />
+
+# Spacing
+
+## Relative Values
+
+| token name | value     |
+| ---------: | --------- |
+|         r1 | 0.0625rem |
+|         r2 | 0.125rem  |
+|         r4 | 0.25rem   |
+|         r8 | 0.5rem    |
+|        r10 | 0.625rem  |
+|        r12 | 0.75rem   |
+|        r14 | 0.875rem  |
+|        r16 | 1rem      |
+|        r20 | 1.25rem   |
+|        r24 | 1.5rem    |
+|        r28 | 1.75rem   |
+|        r32 | 2rem      |
+|        r40 | 2.5rem    |
+
+## Fixed Values
+
+| token name | value |
+| ---------: | ----- |
+|         f1 | 1px   |
+|         f2 | 2px   |
+|         f4 | 4px   |
+|         f8 | 8px   |
+|        f10 | 10px  |
+|        f12 | 12px  |
+|        f14 | 14px  |
+|        f16 | 16px  |
+|        f20 | 20px  |
+|        f24 | 24px  |
+|        f28 | 28px  |
+|        f32 | 32px  |
+|        f40 | 40px  |
+
+## Utils
+
+We provide 3 utils component for spacing.
+
+A `Box` generic component with all css flex box customisation possible.
+A `Stack` component placing children side by side with a uniform configurable gap in between.
+`Stack` children can optionaly be separated by dividers. A `Stack` can be verticaly or horizontaly aligned.
+A `Wrap` component filling parent width with non configurable uniform gap between children.

stories/spacing.stories.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { spacing, Stack, Wrap } from '../src/lib/spacing';
+import { Icon } from '../src/lib/components/icon/Icon.component';
+import {
+  SecondaryText,
+  LargerText,
+  EmphaseText,
+  SmallerSecondaryText,
+} from '../src/lib/components/text/Text.component';
+import { TextBadge } from '../src/lib/components/textbadge/TextBadge.component';
+import { brand } from '../src/lib/style/theme';
+
+export default {
+  title: 'Components/Spacing Utils',
+  component: Stack,
+};
+
+export const Playground = {
+  render:(args) => (
+    <Stack {...args} >
+      <Icon name="Account" size="2x" color="infoPrimary" withWrapper />
+      <LargerText>6 Accounts</LargerText>
+    </Stack>
+  )
+}
+
+export const StackStory = {
+  render: ({}) => {
+    return (
+      <>
+        <h2>Banner example</h2>
+        <div
+          style={{
+            background: brand.backgroundLevel2,
+            padding: spacing.r8,
+            paddingLeft: spacing.r36,
+          }}
+        >
+          <Stack withSeparators={true} gap="r32">
+            <Stack gap="r20">
+              <Icon name="Account" size="2x" color="infoPrimary" withWrapper />
+              <Stack direction="vertical" gap="r4">
+                <LargerText>6 Accounts</LargerText>
+                <SmallerSecondaryText>for this instance</SmallerSecondaryText>
+              </Stack>
+            </Stack>
+            <Stack gap="r32">
+              <Stack>
+                <Icon name={'Check-circle'} color={'statusHealthy'} />
+                <SecondaryText>Replication</SecondaryText>
+              </Stack>
+              <Stack>
+                <Icon name={'Check-circle'} color={'statusHealthy'} />
+                <SecondaryText>Expiration</SecondaryText>
+              </Stack>
+              <Stack>
+                <Icon name={'Check-circle'} color={'statusHealthy'} />
+                <SecondaryText>Transition</SecondaryText>
+              </Stack>
+            </Stack>
+            <Stack direction="vertical" gap="r4">
+              <Stack gap="r4">
+                <EmphaseText>Active Alerts</EmphaseText>
+                <TextBadge text="0" variant="infoPrimary" />
+              </Stack>
+              <SmallerSecondaryText>No active alerts</SmallerSecondaryText>
+            </Stack>
+          </Stack>
+        </div>
+
+        <h2>Vertical divided example</h2>
+        <div
+          style={{
+            background: brand.backgroundLevel4,
+            padding: spacing.r8,
+            paddingLeft: spacing.r36,
+          }}
+        >
+          <Stack direction="vertical" gap="r24" withSeparators>
+            <EmphaseText>Section 1</EmphaseText>
+            <EmphaseText>Section 2</EmphaseText>
+          </Stack>
+        </div>
+      </>
+    );
+  },
+};
+
+export const WrapStory = {
+  render: ({}) => {
+    return (
+      <div
+        style={{
+          background: brand.backgroundLevel2,
+          padding: spacing.r8,
+          color: brand.textPrimary,
+        }}
+      >
+        <Wrap>
+          <Stack>
+            <Icon name="Account" />
+            <Icon name="User" />
+            <Icon name="Bucket" />
+          </Stack>
+          <Stack>
+            <Icon name="Account" />
+            <Icon name="User" />
+            <Icon name="Bucket" />
+          </Stack>
+        </Wrap>
+      </div>
+    );
+  },
+};