refactor

mrksbnc · Nov 26, 2023 · 3aa8a23 · 3aa8a23
1 parent 80463fb
commit 3aa8a23
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 185 deletions.
diff --git a/src/components/Badge/css/badge.scss b/src/components/Badge/css/badge.scss
@@ -122,38 +122,38 @@
 		}
 
 		&.xs {
-			@extend %width-xs;
-			@extend %height-xs;
+			width: 0.625rem;
+			height: 0.625rem;
 		}
 
 		&.sm {
-			@extend %width-sm;
-			@extend %height-sm;
+			width: 0.75rem;
+			height: 0.75rem;
 		}
 
 		&.md {
-			@extend %width-md;
-			@extend %height-md;
+			width: 1rem;
+			height: 1rem;
 		}
 
 		&.lg {
-			@extend %width-lg;
-			@extend %height-lg;
+			width: 1.25rem;
+			height: 1.25rem;
 		}
 
 		&.xl {
-			@extend %width-xl;
-			@extend %height-xl;
+			width: 1.5rem;
+			height: 1.5rem;
 		}
 
 		&.xxl {
-			@extend %width-xxl;
-			@extend %height-xxl;
+			width: 2rem;
+			height: 2rem;
 		}
 
 		&.xxxl {
-			@extend %width-xxxl;
-			@extend %height-xxxl;
+			width: 2.5rem;
+			height: 2.5rem;
 		}
 	}
 

diff --git a/src/components/Loader/__stories__/BoShape.stories.ts b/src/components/Loader/__stories__/BoShape.stories.ts
@@ -12,14 +12,4 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Example: Story = {
-	args: {
-		text: undefined,
-	},
-};
-
-export const WithText: Story = {
-	args: {
-		text: 'Loading...',
-	},
-};
+export const Example: Story = {};
diff --git a/src/components/Loader/css/shape.scss b/src/components/Loader/css/shape.scss
@@ -1,112 +1,21 @@
-@import '@/styles/layout.scss';
-@import '@/styles/typography.scss';
-
 .bo-shape {
-	&__container {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-	}
-
-	&.xs {
-		// &__loader {
-		// 	@extend %height-xs;
-		// 	@extend %width-xs;
-		// }
-
-		&__text {
-			@extend %font-xs;
-		}
-	}
-
-	&.sm {
-		&__loader {
-			@extend %height-sm;
-			@extend %width-sm;
-		}
-
-		&__text {
-			@extend %font-sm;
-		}
-	}
-
-	&.md {
-		&__loader {
-			@extend %height-md;
-			@extend %width-md;
-		}
-
-		&__text {
-			@extend %font-md;
-		}
-	}
-
-	&.lg {
-		&__loader {
-			@extend %height-lg;
-			@extend %width-lg;
-		}
-
-		&__text {
-			@extend %font-lg;
-		}
-	}
-
-	&.xl {
-		&__loader {
-			@extend %height-xl;
-			@extend %width-xl;
-		}
-
-		&__text {
-			@extend %font-xl;
-		}
-	}
-
-	&.xxl {
-		&__loader {
-			@extend %height-xxl;
-			@extend %width-xxl;
-		}
-
-		&__text {
-			@extend %font-xxl;
-		}
-	}
-
-	&.xxxl {
-		&__loader {
-			@extend %height-xxxl;
-			@extend %width-xxxl;
-		}
-
-		&__text {
-			@extend %font-xxxl;
-		}
-	}
+	width: 40px;
+	aspect-ratio: 1;
+	border-radius: 50%;
+	background: var(--red-600);
+	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+	animation: l1 2s infinite cubic-bezier(0.3, 1, 0, 1);
+}
 
-	&__loader {
-		aspect-ratio: 1;
-		border-radius: 50%;
-		background: var(--red-600);
+@keyframes l1 {
+	33% {
+		border-radius: 0;
+		background: var(--blue-600);
 		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-		animation: l1 2s infinite cubic-bezier(0.3, 1, 0, 1);
 	}
-
-	@keyframes l1 {
-		33% {
-			border-radius: 0;
-			background: var(--blue-600);
-			clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-		}
-		66% {
-			border-radius: 0;
-			background: var(--yellow-500);
-			clip-path: polygon(50% 0, 50% 0, 100% 100%, 0 100%);
-		}
-	}
-
-	&__text {
-		@extend %font-xs;
+	66% {
+		border-radius: 0;
+		background: var(--yellow-500);
+		clip-path: polygon(50% 0, 50% 0, 100% 100%, 0 100%);
 	}
 }
diff --git a/src/components/Loader/vue/BoShape.vue b/src/components/Loader/vue/BoShape.vue
@@ -1,62 +1,10 @@
 <template>
-	<div :class="[css, 'bo-shape__container']">
+	<div class="bo-shape">
 		<div class="bo-shape__loader" />
-		<span
-			v-if="text != null"
-			class="bo-shape__text"
-			>{{ text }}</span
-		>
 	</div>
 </template>
 
-<script setup lang="ts">
-import { toRefs, computed } from 'vue';
-import type { OptionalCss } from '@/types';
-import { LoaderSize } from '@/components/Loader';
-
-const props = defineProps({
-	text: {
-		type: String,
-		required: false,
-	},
-	size: {
-		type: String,
-		default: () => LoaderSize.MD,
-	},
-});
-
-const { text, size } = toRefs(props);
-
-const css = computed<OptionalCss>(() => {
-	const classes: OptionalCss = {};
-
-	switch (size.value) {
-		case LoaderSize.XS:
-			classes['xs'] = true;
-			break;
-		case LoaderSize.SM:
-			classes['sm'] = true;
-			break;
-		case LoaderSize.MD:
-			classes['md'] = true;
-			break;
-		case LoaderSize.LG:
-			classes['lg'] = true;
-			break;
-		case LoaderSize.XL:
-			classes['xl'] = true;
-			break;
-		case LoaderSize.XXL:
-			classes['xxl'] = true;
-			break;
-		case LoaderSize.XXXL:
-			classes['xxxl'] = true;
-			break;
-	}
-
-	return classes;
-});
-</script>
+<script setup lang="ts"></script>
 
 <style scoped lang="scss">
 @import '@/components/Loader/css/shape.scss';