add support for primary and gray colors for now

directus · Jul 10, 2023 · 9c6df6b · 9c6df6b
1 parent d3cc098
commit 9c6df6b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/components/src/base-badge/base-badge.story.vue b/components/src/base-badge/base-badge.story.vue
@@ -5,6 +5,7 @@ import BaseBadge from './base-badge.vue';
 const state = reactive({
 	size: 'medium',
 	label: 'Badge',
+	color: 'primary',
 	caps: false,
 	border: false,
 });
@@ -22,11 +23,19 @@ const state = reactive({
 					large: 'Large',
 				}"
 			/>
+			<HstSelect
+				v-model="state.color"
+				title="Color"
+				:options="{
+					primary: 'Primary',
+					gray: 'Gray',
+				}"
+			/>
 			<HstText v-model="state.label" title="Icon" />
 			<HstToggle v-model="state.caps" title="Caps" />
 			<HstToggle v-model="state.border" title="Border" />
 		</template>
 
-		<BaseBadge :size="state.size" :label="state.label" :caps="state.caps" :border="state.border" />
+		<BaseBadge :size="state.size" :color="state.color" :label="state.label" :caps="state.caps" :border="state.border" />
 	</Story>
 </template>
diff --git a/components/src/base-badge/base-badge.vue b/components/src/base-badge/base-badge.vue
@@ -13,8 +13,7 @@ export interface BaseBadgeProps {
 	 * Color of the badge.
 	 * @values primary, white, danger
 	 */
-	// TODO: What colors are we allowing for badges?
-	color?: 'primary';
+	color?: 'primary' | 'gray';
 
 	/**
 	 * Whether the badge should be displayed in all caps.
@@ -83,6 +82,15 @@ const badgeClass = computed(() => {
 		props.border && 'border'
 	);
 });
+
+const borderColor = computed(() => {
+	switch (props.color) {
+		case 'primary':
+			return 'var(--purple-300)';
+		default:
+			return 'var(--gray-300)';
+	}
+});
 </script>
 
 <template>
@@ -111,6 +119,11 @@ const badgeClass = computed(() => {
 	color: var(--purple-600);
 }
 
+.badge-gray {
+	background-color: var(--gray-50);
+	color: var(--gray-600);
+}
+
 /* Sizes */
 .badge-small {
 	font-size: var(--text-xs);
@@ -129,7 +142,7 @@ const badgeClass = computed(() => {
 
 /* Props */
 .border {
-	border: 1px solid var(--purple-200);
+	border: 1px solid v-bind(borderColor);
 }
 
 .caps {