feat: footer component

ADOFAI-gg · May 2, 2024 · 0426e9d · 0426e9d
1 parent 5633a91
commit 0426e9d
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 12 deletions.
diff --git a/src/lib/components/Container.svelte b/src/lib/components/Container.svelte
@@ -1 +1,5 @@
-<div class="container">Container</div>
+<div class="container" {...$$restProps}>
+  <slot />
+</div>
+
+
diff --git a/src/lib/components/footer/Footer.svelte b/src/lib/components/footer/Footer.svelte
@@ -39,16 +39,18 @@
 </footer>
 
 <style lang="scss">
+	@import '../../stylesheets/system/breakpoints';
+
 	.footer {
 		background-color: rgba(0, 0, 0, 0.2);
-		padding: 24px;
 	}
 
 	.footer-content {
 		width: 100%;
 		display: flex;
 		flex-direction: column;
 		gap: 12px;
+		padding: 24px;
 	}
 
 	.footer-title {
@@ -62,7 +64,12 @@
 	}
 
 	.footer-links {
-		display: grid;
-		gap: 4px;
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+
+		@include breakpoint('sm') {
+			gap: 4px;
+		}
 	}
 </style>
diff --git a/src/lib/components/footer/FooterSection.svelte b/src/lib/components/footer/FooterSection.svelte
@@ -15,11 +15,18 @@
 </section>
 
 <style lang="scss">
+	@import '../../stylesheets/system/breakpoints';
+
 	.footer-section {
 		display: flex;
 		width: 100%;
-		gap: 8px;
-		align-items: center;
+		flex-direction: column;
+
+		@include breakpoint('sm') {
+			flex-direction: row;
+			align-items: center;
+			gap: 8px;
+		}
 	}
 
 	.title {
@@ -28,6 +35,11 @@
 
 	.content {
 		display: flex;
-		gap: 12px;
+		flex-direction: column;
+
+		@include breakpoint('sm') {
+			gap: 12px;
+			flex-direction: row;
+		}
 	}
 </style>
diff --git a/src/lib/stylesheets/system/_container.scss b/src/lib/stylesheets/system/_container.scss
@@ -2,7 +2,6 @@
 
 .container {
 	width: 100%;
-	background-color: black;
 	margin: 0 auto;
 
 	@each $name, $data in $breakpoints {

diff --git a/src/stories/footer/Footer.stories.svelte b/src/stories/footer/Footer.stories.svelte
@@ -1,10 +1,14 @@
 <script lang="ts" context="module">
 	import { Footer } from '$lib/index.js'
 	import { Story, Template } from '@storybook/addon-svelte-csf'
+	import type { Meta } from '@storybook/svelte'
 
-	export const meta = {
+	export const meta: Meta = {
 		component: Footer,
-		title: 'Components/Footer'
+		title: 'Components/Footer',
+		parameters: {
+			layout: 'fullscreen'
+		}
 	}
 </script>
 
@@ -13,5 +17,3 @@
 </Template>
 
 <Story name="Default" args={{}} />
-
-<Story name="Minimal" args={{ minimal: true }} />