@volverjs/ui-vue 0.0.7 → 0.0.8-beta.1

package/src/components/VvAlert/VvAlert.vue

@@ -16,27 +16,45 @@
 
 <template>
 	<div v-bind="hasProps">
-		<div class="vv-alert__header">
+		<div
+			v-if="
+				$slots.header ||
+				$slots.title ||
+				$slots.close ||
+				$slots['title::before'] ||
+				$slots['title::after'] ||
+				title ||
+				dismissable ||
+				autoClose
+			"
+			class="vv-alert__header"
+		>
 			<VvIcon v-if="hasIcon" v-bind="hasIcon" class="vv-alert__icon" />
 			<!-- @slot Header slot -->
 			<slot name="header">
 				<!-- @slot Before title slot -->
 				<slot name="title::before" />
 				<strong :id="hasTitleId" class="vv-alert__title">
-					{{ title }}
+					<!-- @slot Title slot -->
+					<slot name="title">
+						{{ title }}
+					</slot>
 				</strong>
 				<!-- @slot After title slot -->
 				<slot name="title::after" />
 			</slot>
-			<button
-				v-if="dismissable || autoClose"
-				class="vv-alert__close"
-				type="button"
-				:aria-label="closeLabel"
-				@click.stop="close"
-			>
-				<div class="vv-alert__close-mask"></div>
-			</button>
+			<!-- @slot Close button slot -->
+			<slot name="close" v-bind="{ close }">
+				<button
+					v-if="dismissable || autoClose"
+					class="vv-alert__close"
+					type="button"
+					:aria-label="closeLabel"
+					@click.stop="close"
+				>
+					<div class="vv-alert__close-mask"></div>
+				</button>
+			</slot>
 		</div>
 		<div v-if="$slots.default || content" class="vv-alert__content">
 			<!-- @slot Content slot -->

package/src/stories/Alert/Alert.settings.ts

@@ -87,6 +87,16 @@ export const argTypes = {
 			},
 		},
 	},
+	close: {
+		control: {
+			type: 'text',
+		},
+		table: {
+			type: {
+				summary: 'html',
+			},
+		},
+	},
 	default: {
 		control: {
 			type: 'text',

package/src/stories/Alert/Alert.test.ts

@@ -16,7 +16,7 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 
 	const alertHeaderEl =
 		element.getElementsByClassName('vv-alert__header')?.[0]
-	const closeButton = alertHeaderEl?.lastChild as HTMLElement
+	const closeButtonEl = element.getElementsByClassName('vv-alert__close')?.[0]
 	const alertContentEl =
 		element.getElementsByClassName('vv-alert__content')?.[0]
 	const alertFooterEl =
@@ -32,14 +32,18 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	// dismissable
 	if (args.dismissable) {
 		expect(element).toHaveClass('vv-alert--dismissable')
-		expect(closeButton).toHaveClass('vv-alert__close')
+		expect(closeButtonEl).not.toBeUndefined()
 	}
 
 	// autoclose
 	if (args.autoClose) {
 		expect(element).toHaveClass('vv-alert--auto-close')
-		expect(closeButton).toHaveClass('vv-alert__close')
-		expect(closeButton.firstChild).toHaveClass('vv-alert__close-mask')
+		expect(closeButtonEl).not.toBeUndefined()
+		expect(closeButtonEl.firstChild).toHaveClass('vv-alert__close-mask')
+	}
+
+	if (!args.autoClose && !args.dismissable) {
+		expect(closeButtonEl).toBeUndefined()
 	}
 
 	// icon