togglecards

packages/ui/src/components/base/SmartClickable.vue

@@ -49,8 +49,7 @@ defineOptions({
 	// When clickable is being hovered or focus-visible, give contents an effect
 	:first-child:hover + .smart-clickable__contents,
 	:first-child:focus-visible + .smart-clickable__contents,
-	.smart-clickable__contents:hover,
-	.smart-clickable__contents:focus-within {
+	.smart-clickable__contents:hover {
 		// Utility classes for contents
 		:deep(.smart-clickable\:underline-on-hover) {
 			text-decoration: underline;
@@ -79,7 +78,7 @@ defineOptions({
 
 	// When clickable is being clicked, give contents an effect
 	:first-child:active + .smart-clickable__contents {
-		scale: 0.97;
+		scale: 0.98;
 	}
 }
 </style>

packages/ui/src/components/base/ToggleCard.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { SmartClickable, Toggle } from '@modrinth/ui'
+import { useId, computed } from 'vue'
+
+const value = defineModel<boolean>('value', { required: true })
+
+const baseId = useId()
+const toggleId = computed(() => `toggle-card-toggle-${baseId}`)
+</script>
+
+<template>
+	<SmartClickable
+		class="flex w-full flex-col overflow-clip rounded-2xl border border-solid border-surface-4 bg-surface-3"
+	>
+		<template #clickable>
+			<button
+				aria-hidden="true"
+				tabindex="-1"
+				class="flex h-full w-full cursor-pointer"
+				@click="value = !value"
+			/>
+		</template>
+		<div class="grid w-full grid-cols-[1fr_auto] items-center gap-6 p-4">
+			<div>
+				<slot :toggle-id="toggleId" />
+			</div>
+			<div>
+				<slot name="toggle">
+					<Toggle :id="toggleId" v-model="value" class="smart-clickable:allow-pointer-events" />
+				</slot>
+			</div>
+		</div>
+		<Transition name="toggle-card-content">
+			<div v-if="value && $slots.expanded" class="smart-clickable:allow-pointer-events">
+				<div>
+					<div class="border-0 border-t border-solid border-surface-4 bg-surface-2 p-4">
+						<slot name="expanded" />
+					</div>
+				</div>
+			</div>
+		</Transition>
+	</SmartClickable>
+</template>
+<style scoped>
+.toggle-card-content-enter-active,
+.toggle-card-content-leave-active {
+	display: grid;
+	grid-template-rows: 1fr;
+	transition: grid-template-rows 0.25s ease-in-out;
+
+	& > div {
+		grid-row: 1 / span 2;
+	}
+}
+
+.toggle-card-content-enter-from,
+.toggle-card-content-leave-to {
+	grid-template-rows: 0fr;
+}
+</style>

packages/ui/src/components/base/index.ts

@@ -121,4 +121,5 @@ export type {
 export { default as TimeFramePicker } from './TimeFramePicker.vue'
 export { default as Timeline } from './Timeline.vue'
 export { default as Toggle } from './Toggle.vue'
+export { default as ToggleCard } from './ToggleCard.vue'
 export { default as UnsavedChangesPopup } from './UnsavedChangesPopup.vue'

packages/ui/src/locales/en-US/index.json

@@ -3620,6 +3620,9 @@
   "project.settings.description.title": {
     "defaultMessage": "Description"
   },
+  "project.settings.disclosures.title": {
+    "defaultMessage": "Disclosures"
+  },
   "project.settings.environment.client_and_server.description": {
     "defaultMessage": "Has some functionality on both the client and server, even if only partially."
   },

packages/ui/src/utils/common-messages.ts

@@ -1094,6 +1094,10 @@ export const commonProjectSettingsMessages = defineMessages({
 		id: 'project.settings.content.title',
 		defaultMessage: 'Content',
 	},
+	disclosures: {
+		id: 'project.settings.disclosures.title',
+		defaultMessage: 'Disclosures',
+	},
 	description: {
 		id: 'project.settings.description.title',
 		defaultMessage: 'Description',