Updates home webview content

src/storage.ts

@@ -123,6 +123,12 @@ export interface GlobalStorage {
 		actions: {
 			completed?: CompletedActions[];
 		};
+		steps: {
+			completed?: string[];
+		};
+		sections: {
+			dismissed?: string[];
+		};
 	};
 	pendingWelcomeOnFocus?: boolean;
 	pendingWhatsNewOnFocus?: boolean;

src/webviews/apps/home/components/card-section.ts

@@ -0,0 +1,110 @@
+import { attr, css, customElement, FASTElement, html, volatile, when } from '@microsoft/fast-element';
+import { numberConverter } from '../../shared/components/converters/number-converter';
+import '../../shared/components/codicon';
+
+const template = html<CardSection>`<template
+	role="region"
+	style="${x => (x.backdrop !== '' ? `background-image: url(${x.backdrop})` : '')}"
+>
+	${when(
+		x => x.noHeading === false,
+		html<CardSection>`<header>
+			<div class="heading" role="heading" aria-level="${x => x.headingLevel}">
+				<slot name="heading"></slot>
+				<small class="description"><slot name="description"></slot></small>
+			</div>
+			${when(
+				x => x.dismissable,
+				html<CardSection>`<button
+					class="dismiss"
+					type="button"
+					@click="${(x, c) => x.handleDismiss(c.event)}"
+					title="dismiss"
+					aria-label="dismiss"
+				>
+					<code-icon icon="close"></code-icon>
+				</button>`,
+			)}
+		</header>`,
+	)}
+	<div class="content"><slot></slot></div>
+</template>`;
+
+const styles = css`
+	* {
+		box-sizing: border-box;
+	}
+
+	:host {
+		display: block;
+		padding: 1.2rem;
+		background-color: #aaaaaa10;
+		margin-bottom: 1rem;
+		border-radius: 0.4rem;
+		background-repeat: no-repeat;
+		background-size: cover;
+	}
+
+	header {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		gap: 0.4rem;
+		margin-bottom: 1rem;
+	}
+
+	.dismiss {
+		width: 2rem;
+		height: 2rem;
+		padding: 0;
+		font-size: var(--vscode-editor-font-size);
+		line-height: 2rem;
+		font-family: inherit;
+		border: none;
+		color: inherit;
+		background: none;
+		text-align: left;
+		cursor: pointer;
+		opacity: 0.5;
+		flex: none;
+		text-align: center;
+	}
+
+	.dismiss:focus {
+		outline: 1px solid var(--vscode-focusBorder);
+		outline-offset: 0.2rem;
+	}
+
+	.heading {
+		text-transform: uppercase;
+	}
+
+	.description {
+		margin-left: 0.2rem;
+		text-transform: none;
+		/* color needs to come from some sort property */
+		color: #b68cd8;
+	}
+`;
+
+@customElement({ name: 'card-section', template: template, styles: styles })
+export class CardSection extends FASTElement {
+	@attr
+	backdrop = '';
+
+	@attr({ attribute: 'no-heading', mode: 'boolean' })
+	noHeading = false;
+
+	@attr({ attribute: 'heading-level', converter: numberConverter })
+	headingLevel = 2;
+
+	@attr({ mode: 'boolean' })
+	dismissable = false;
+
+	@attr({ mode: 'boolean' })
+	expanded = true;
+
+	handleDismiss(e: Event) {
+		this.$emit('dismiss');
+	}
+}

src/webviews/apps/home/components/stepped-section.ts

@@ -0,0 +1,108 @@
+import { attr, css, customElement, FASTElement, html, volatile, when } from '@microsoft/fast-element';
+import { numberConverter } from '../../shared/components/converters/number-converter';
+import '../../shared/components/codicon';
+
+const template = html<SteppedSection>`<template role="region">
+	<header class="heading" role="heading" aria-level="${x => x.headingLevel}">
+		<button
+			id="button"
+			class="button"
+			type="button"
+			aria-expanded="${x => !x.completed}"
+			aria-controls="content"
+			@click="${(x, c) => x.handleClick(c.event)}"
+		>
+			<slot name="heading"></slot>
+			<small class="description"><slot name="description"></slot></small>
+		</button>
+	</header>
+	<div class="content${x => (x.completed ? ' is-hidden' : '')}" id="content" aria-labelledby="button">
+		<slot></slot>
+	</div>
+	<span class="checkbox"
+		><code-icon icon="${x => (x.completed ? 'pass-filled' : 'circle-large-outline')}"></code-icon
+	></span>
+</template>`;
+
+const styles = css`
+	* {
+		box-sizing: border-box;
+	}
+
+	:host {
+		display: grid;
+		gap: 0 0.8rem;
+		grid-template-columns: 16px auto;
+		grid-auto-flow: column;
+		margin-bottom: 2.4rem;
+	}
+
+	.button {
+		width: 100%;
+		padding: 0.1rem 0 0 0;
+		font-size: var(--vscode-editor-font-size);
+		line-height: 1.6rem;
+		font-family: inherit;
+		border: none;
+		color: inherit;
+		background: none;
+		text-align: left;
+		text-transform: uppercase;
+		cursor: pointer;
+	}
+
+	.button:focus {
+		outline: 1px solid var(--vscode-focusBorder);
+		outline-offset: 0.2rem;
+	}
+
+	.checkbox {
+		position: relative;
+		grid-column: 1;
+		grid-row: 1 / span 2;
+		color: var(--vscode-textLink-foreground);
+	}
+
+	:host(:not(:last-of-type)) .checkbox:after {
+		content: '';
+		position: absolute;
+		border-left: 0.1rem solid currentColor;
+		width: 0;
+		top: 1.6rem;
+		bottom: -2.4rem;
+		left: 50%;
+		transform: translateX(-50%);
+		opacity: 0.3;
+	}
+
+	.content {
+		margin-top: 1rem;
+	}
+
+	.content.is-hidden {
+		display: none;
+	}
+
+	.description {
+		margin-left: 0.2rem;
+		text-transform: none;
+		/* color needs to come from some sort property */
+		color: #b68cd8;
+		opacity: 0.6;
+		font-style: italic;
+	}
+`;
+
+@customElement({ name: 'stepped-section', template: template, styles: styles })
+export class SteppedSection extends FASTElement {
+	@attr({ attribute: 'heading-level', converter: numberConverter })
+	headingLevel = 2;
+
+	@attr({ mode: 'boolean' })
+	completed = false;
+
+	handleClick(e: Event) {
+		this.completed = !this.completed;
+		this.$emit('complete', this.completed);
+	}
+}