Add Section Story

src/stories/Section.stories.js

@@ -0,0 +1,34 @@
+import Section from './Section.vue';
+
+export default {
+    title: 'Components/Section',
+    component: Section,
+    tags: ['autodocs'],
+    argTypes: {
+        platform: {
+            options: [ "android", "android_x", "ios", "macos", "tdesktop", "weba", "webk", "unigram", "unknown" ],
+            control: { type: 'select' },
+        },
+        colorScheme: {
+            options: ['light', 'dark'],
+            control: { type: 'radio' },
+        },
+        theme: {
+            options: ['material', 'apple'],
+            control: { type: 'radio' },
+        },
+        title: {
+            control: { type: 'text' },
+        },
+        description: {
+            control: { type: 'text' },
+        },
+    },
+}
+
+export const Default = {
+    args: {
+        title: 'Section Title',
+        description: "A brief explanation of the section and it's usage",
+    }
+};

src/stories/Section.vue

@@ -0,0 +1,49 @@
+<script setup>
+    import Section from '../components/Section.vue';
+    import List from '../components/List.vue';
+    import Checkbox from '../components/Checkbox.vue';
+    import Switch from '../components/Switch.vue';
+
+    const props = defineProps({
+        platform: {
+            type: String,
+        },
+        colorScheme: {
+            type: String,
+        },
+        theme: {
+            type: String,
+        },
+        title: {
+            type: String,
+        },
+        description: {
+            type: String,
+        },
+    });
+</script>
+
+<template>
+    <div>
+        <Section v-bind="props" >
+            <List>
+                <li>Item 1<Switch :checked="true" /></li>
+                <li>Item 2<Switch :checked="true" /></li>
+                <li>Item 3<Switch :checked="true" /></li>
+            </List>
+        </Section>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+    div {
+        background-color: var(--tg-theme-secondary-bg-color);
+    }
+
+    li {
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+        justify-content: space-between;
+    }
+</style>