feat: collapse component added showClose prop and closeIcon slot (#208)

ikun-svelte · Sep 4, 2023 · 28b383e · 28b383e
1 parent 6baa206
commit 28b383e
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 121 deletions.
diff --git a/components/Collapse/__test__/__snapshots__/collapse.spec.ts.snap b/components/Collapse/__test__/__snapshots__/collapse.spec.ts.snap
@@ -4,8 +4,12 @@ exports[`Test: KCollapse > props: content 1`] = `"<div class=\\"k-collapse k-col
 
 exports[`Test: KCollapse > props: show 1`] = `"<div class=\\"k-collapse k-collapse--base\\"><div class=\\"k-collapse--title k-collapse--title__dark k-collapse--title__show\\" aria-hidden=\\"true\\"> <div role=\\"\\" aria-hidden=\\"true\\" class=\\"k-icon--base k-icon--base__dark  \\"><div class=\\"i-carbon-chevron-right rotate-90 k-icon-transition \\" style=\\"width: 24px; height: 24px;\\"></div></div></div> <div class=\\"k-collapse--content\\" style=\\"animation: __svelte_2259128677_0 300ms linear 0ms 1 both;\\"><div class=\\"k-collapse--line\\"></div> foo</div></div>"`;
 
+exports[`Test: KCollapse > props: showClose 1`] = `"<div class=\\"k-collapse k-collapse--base\\"><div class=\\"k-collapse--title k-collapse--title__dark\\" aria-hidden=\\"true\\">title-content </div> </div>"`;
+
 exports[`Test: KCollapse > props: title 1`] = `"<div class=\\"k-collapse k-collapse--base\\"><div class=\\"k-collapse--title k-collapse--title__dark\\" aria-hidden=\\"true\\">title-content <div role=\\"\\" aria-hidden=\\"true\\" class=\\"k-icon--base k-icon--base__dark  \\"><div class=\\"i-carbon-chevron-right  k-icon-transition \\" style=\\"width: 24px; height: 24px;\\"></div></div></div> </div>"`;
 
+exports[`Test: KCollapse > slot: closeIcon 1`] = `"<div class=\\"k-collapse k-collapse--base\\"><div class=\\"k-collapse--title k-collapse--title__dark\\" aria-hidden=\\"true\\"> <div slot=\\"closeIcon\\" class=\\"flex\\"><div>🍓 closeIcon</div></div></div> </div>"`;
+
 exports[`Test: KCollapse > slot: content 1`] = `"<div class=\\"k-collapse k-collapse--base\\"><div class=\\"k-collapse--title k-collapse--title__dark k-collapse--title__show\\" aria-hidden=\\"true\\"> <div role=\\"\\" aria-hidden=\\"true\\" class=\\"k-icon--base k-icon--base__dark  \\"><div class=\\"i-carbon-chevron-right rotate-90 k-icon-transition \\" style=\\"width: 24px; height: 24px;\\"></div></div></div> <div class=\\"k-collapse--content\\"><div class=\\"k-collapse--line\\"></div> <div slot=\\"content\\" class=\\"flex\\"><div id=\\"custom_content\\">🍞 Bread! Bread! We want to bread!</div></div></div></div>"`;
 
 exports[`Test: KCollapse > slot: title 1`] = `"<div class=\\"k-collapse k-collapse--base\\"><div class=\\"k-collapse--title k-collapse--title__dark\\" aria-hidden=\\"true\\"><div slot=\\"title\\" class=\\"flex\\"><div id=\\"custom_title\\">🍓 Germinal</div></div> <div role=\\"\\" aria-hidden=\\"true\\" class=\\"k-icon--base k-icon--base__dark  \\"><div class=\\"i-carbon-chevron-right  k-icon-transition \\" style=\\"width: 24px; height: 24px;\\"></div></div></div> </div>"`;
diff --git a/components/Collapse/__test__/collapse.close.test.svelte b/components/Collapse/__test__/collapse.close.test.svelte
@@ -0,0 +1,9 @@
+<script>
+	import KCollapse from '../src/index.svelte';
+</script>
+
+<KCollapse>
+	<div slot="closeIcon" class="flex">
+		<div>🍓 closeIcon</div>
+	</div>
+</KCollapse>
diff --git a/components/Collapse/__test__/collapse.spec.ts b/components/Collapse/__test__/collapse.spec.ts
@@ -3,6 +3,7 @@ import { afterEach, expect, test, describe, beforeEach, vi } from 'vitest';
 import KCollapse from '../src/index.svelte';
 import KCollapseContent from './collapse.content.test.svelte';
 import KCollapseTitle from './collapse.title.test.svelte';
+import KCollapseCloseIcon from './collapse.close.test.svelte';
 let host: HTMLElement;
 
 const initHost = () => {
@@ -32,6 +33,19 @@ describe('Test: KCollapse', () => {
 		expect(host.innerHTML).matchSnapshot();
 	});
 
+	test('props: showClose', async () => {
+		const instance = new KCollapse({
+			target: host,
+			props: {
+				title: 'title-content',
+				showClose: false
+			}
+		});
+		expect(instance).toBeTruthy();
+		expect(host.innerHTML.includes('k-icon--bas')).not.toBeTruthy();
+		expect(host.innerHTML).matchSnapshot();
+	});
+
 	test('props: content', async () => {
 		const instance = new KCollapse({
 			target: host,
@@ -96,7 +110,7 @@ describe('Test: KCollapse', () => {
 			target: host
 		});
 		expect(instance).toBeTruthy();
-		expect(document.getElementById('custom_title'));
+		expect(document.getElementById('custom_title')).toBeTruthy();
 		expect(host.innerHTML).matchSnapshot();
 	});
 
@@ -105,7 +119,16 @@ describe('Test: KCollapse', () => {
 			target: host
 		});
 		expect(instance).toBeTruthy();
-		expect(document.getElementById('custom_content'));
+		expect(document.getElementById('custom_content')).toBeTruthy();
+		expect(host.innerHTML).matchSnapshot();
+	});
+
+	test('slot: closeIcon', async () => {
+		const instance = new KCollapseCloseIcon({
+			target: host
+		});
+		expect(instance).toBeTruthy();
+		expect(host.innerHTML.includes('🍓 closeIcon')).toBeTruthy();
 		expect(host.innerHTML).matchSnapshot();
 	});
 });
diff --git a/components/Collapse/src/index.svelte b/components/Collapse/src/index.svelte
@@ -10,6 +10,7 @@
 	export let attrs = {};
 	export let cls: ClassValue = '';
 	export let show = false;
+	export let showClose = true;
 
 	const dispatch = createEventDispatcher();
 	let showInner = show;
@@ -36,7 +37,11 @@
 		<slot name="title">
 			{title}
 		</slot>
-		<KIcon icon="i-carbon-chevron-right {showInner ? 'rotate-90' : ''}" />
+		<slot name="closeIcon">
+			{#if showClose}
+				<KIcon icon="i-carbon-chevron-right {showInner ? 'rotate-90' : ''}" />
+			{/if}
+		</slot>
 	</div>
 	{#if showInner}
 		<div

diff --git a/docs/components/KCollapse.md b/docs/components/KCollapse.md
@@ -39,13 +39,14 @@ You can render content through slots
 
 ## Collapse Props
 
-| Name    | Type                     | Default | Description                    |
-| ------- | ------------------------ | ------- | ------------------------------ |
-| title   | `string`                 | `-`     | content of Collapse Item title |
-| content | `string`                 | `-`     | content of Collapse Item       |
-| show    | `boolean`                | `false` | expand the Collapse            |
-| cls     | `string`                 | `-`     | Additional class               |
-| attrs   | `Record<string, string>` | `{}`    | Additional attributes          |
+| Name      | Type                     | Default | Description                          |
+| --------- | ------------------------ | ------- | ------------------------------------ |
+| title     | `string`                 | `-`     | Content of Collapse Item title       |
+| content   | `string`                 | `-`     | Content of Collapse Item             |
+| show      | `boolean`                | `false` | Expand the Collapse                  |
+| showClose | `boolean`                | `true`  | Determine whether display close ionc |
+| cls       | `string`                 | `-`     | Additional class                     |
+| attrs     | `Record<string, string>` | `{}`    | Additional attributes                |
 
 ## Collapse Events
 
@@ -55,7 +56,8 @@ You can render content through slots
 
 ## Collapse Slots
 
-| Name    | Description                           |
-| ------- | ------------------------------------- |
-| title   | Customize Collapse Item title content |
-| content | Customize Collapse Item content       |
+| Name      | Description                           |
+| --------- | ------------------------------------- |
+| title     | Customize Collapse Item title content |
+| content   | Customize Collapse Item content       |
+| closeIcon | Customize close icon                  |
diff --git a/package.json b/package.json
@@ -153,7 +153,7 @@
 		"vitest": "^0.34.1"
 	},
 	"lint-staged": {
-		"*.{svelte,js,ts,jsx,tsx,md,json}": [
+		"*.{svelte,js,ts,jsx,tsx,json}": [
 			"prettier --write",
 			"eslint"
 		]