Separates feature card to a new file

(#4769, #4773, PLG-138)

Author: sergeibbb

src/webviews/apps/welcome/components/feature-card.ts

@@ -0,0 +1,65 @@
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import '../../shared/components/button';
+import '../../shared/components/code-icon';
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'gl-feature-card': GlFeatureCard;
+	}
+}
+
+@customElement('gl-feature-card')
+export class GlFeatureCard extends LitElement {
+	static override styles = [
+		css`
+			:host {
+				display: flex;
+				gap: 1em;
+			}
+
+			.image {
+				width: 50%;
+			}
+
+			.content {
+				margin-top: 0.5em;
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				gap: 0.5em;
+			}
+
+			@media (max-width: 640px) {
+				:host {
+					flex-direction: column;
+				}
+
+				.image {
+					width: 100%;
+				}
+
+				.content {
+					margin-top: 0;
+					margin-left: 0.3em;
+					margin-right: 0.3em;
+				}
+
+				::slotted(*) {
+					width: 100%;
+				}
+			}
+		`,
+	];
+
+	override render(): unknown {
+		return html`
+			<div class="image">
+				<slot name="image"></slot>
+			</div>
+			<div class="content">
+				<slot></slot>
+			</div>
+		`;
+	}
+}

src/webviews/apps/welcome/components/feature-carousel.ts

@@ -6,7 +6,6 @@ import '../../shared/components/code-icon';
 declare global {
 	interface HTMLElementTagNameMap {
 		'gl-feature-carousel': GlFeatureCarousel;
-		'gl-feature-card': GlFeatureCard;
 	}
 }
 
@@ -117,58 +116,3 @@ export class GlFeatureCarousel extends LitElement {
 		`;
 	}
 }
-
-@customElement('gl-feature-card')
-export class GlFeatureCard extends LitElement {
-	static override styles = [
-		css`
-			:host {
-				display: flex;
-				gap: 1em;
-			}
-
-			.image {
-				width: 50%;
-			}
-
-			.content {
-				margin-top: 0.5em;
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-				gap: 0.5em;
-			}
-
-			@media (max-width: 640px) {
-				:host {
-					flex-direction: column;
-				}
-
-				.image {
-					width: 100%;
-				}
-
-				.content {
-					margin-top: 0;
-					margin-left: 0.3em;
-					margin-right: 0.3em;
-				}
-
-				::slotted(*) {
-					width: 100%;
-				}
-			}
-		`,
-	];
-
-	override render(): unknown {
-		return html`
-			<div class="image">
-				<slot name="image"></slot>
-			</div>
-			<div class="content">
-				<slot></slot>
-			</div>
-		`;
-	}
-}

src/webviews/apps/welcome/welcome.ts

@@ -11,6 +11,7 @@ import { WelcomeStateProvider } from './stateProvider';
 import '../shared/components/gitlens-logo';
 import { welcomeStyles } from './welcome.css';
 import './components/feature-carousel';
+import './components/feature-card';
 
 @customElement('gl-welcome-app')
 export class GlWelcomeApp extends GlAppHost<State> {