Interactions for selecting project type in project wizard (#2746)

* connect select project type to project state - add ProjectType and ProjectTypeGroup (based on RadioButton and RadioButtonGroup) - store the user's project type selection in the project state * add localization for default project name prefix * add icons from runtimes to project type button * add styling and keyboard navigation support * add python, r and jupyter logos to project type selection * refactor project type step to not use runtime info * focus selected project type on navigate back * remove unused css * move logo licenses to ThirdPartyNotices.txt * update project type default/hover/selected colours * update project type button colours - make border colour the same as the background colour for regular light and dark mode - make onhover and onselected similarly styled
posit-dev · Apr 12, 2024 · cefacbd · cefacbd
1 parent 9389807
commit cefacbd
Show file tree

Hide file tree

Showing 15 changed files with 1,541 additions and 47 deletions.
diff --git a/ThirdPartyNotices.txt b/ThirdPartyNotices.txt
diff --git a/build/lib/stylelint/vscode-known-variables.json b/build/lib/stylelint/vscode-known-variables.json
@@ -577,6 +577,15 @@
 		"--vscode-positronModalDialog-defaultButtonForeground",
 		"--vscode-positronModalDialog-defaultButtonHoverBackground",
 		"--vscode-positronModalDialog-foreground",
+		"--vscode-positronModalDialog-projectTypeBackground",
+		"--vscode-positronModalDialog-projectTypeBackgroundHover",
+		"--vscode-positronModalDialog-projectTypeBackgroundSelected",
+		"--vscode-positronModalDialog-projectTypeBorder",
+		"--vscode-positronModalDialog-projectTypeBorderHover",
+		"--vscode-positronModalDialog-projectTypeBorderSelected",
+		"--vscode-positronModalDialog-projectTypeForeground",
+		"--vscode-positronModalDialog-projectTypeForegroundHover",
+		"--vscode-positronModalDialog-projectTypeForegroundSelected",
 		"--vscode-positronModalDialog-radioButtonBackground",
 		"--vscode-positronModalDialog-radioButtonBorder",
 		"--vscode-positronModalDialog-radioButtonForeground",

diff --git a/src/vs/workbench/browser/positronNewProjectWizard/components/logos/logoJupyter.svg b/src/vs/workbench/browser/positronNewProjectWizard/components/logos/logoJupyter.svg
diff --git a/src/vs/workbench/browser/positronNewProjectWizard/components/logos/logoJupyter.tsx b/src/vs/workbench/browser/positronNewProjectWizard/components/logos/logoJupyter.tsx
@@ -0,0 +1,212 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (C) 2024 Posit Software, PBC. All rights reserved.
+ *--------------------------------------------------------------------------------------------*/
+
+// CSS.
+import 'vs/css!./projectTypeLogo';
+
+// React.
+import * as React from 'react';
+
+export const JupyterLogo = () => (
+	// The below SVG React code was generated by using https://github.com/gregberge/svgr on the
+	// Jupyter logo svg file located at src/vs/workbench/browser/positronNewProjectWizard/components/logos/logoJupyter.svg,
+	// and then adapted for sizing and unique ids to avoid conflicts with other logos.
+	// Please see the corresponding license for the original Jupyter logo svg file in the top-level ThirdPartyNotices.txt.
+	<svg
+		xmlns='http://www.w3.org/2000/svg'
+		xmlnsXlink='http://www.w3.org/1999/xlink'
+		viewBox='0 0 48 48'
+		className='project-type-logo'
+	>
+		<title>{'Group.svg'}</title>
+		<g
+			style={{
+				mixBlendMode: 'normal',
+			}}
+		>
+			<g
+				style={{
+					mixBlendMode: 'normal',
+				}}
+			>
+				<use
+					xlinkHref='#jupyter-logo-a'
+					width='100%'
+					height='100%'
+					fill='#4e4e4e'
+					style={{
+						mixBlendMode: 'normal',
+					}}
+					transform='matrix(.95992 0 0 .95992 3.525 19.867)'
+				/>
+				<use
+					xlinkHref='#jupyter-logo-b'
+					width='100%'
+					height='100%'
+					fill='#4e4e4e'
+					style={{
+						mixBlendMode: 'normal',
+					}}
+					transform='matrix(.95992 0 0 .95992 8.459 19.877)'
+				/>
+				<use
+					xlinkHref='#jupyter-logo-c'
+					width='100%'
+					height='100%'
+					fill='#4e4e4e'
+					style={{
+						mixBlendMode: 'normal',
+					}}
+					transform='matrix(.95992 0 0 .95992 15.86 19.771)'
+				/>
+				<use
+					xlinkHref='#jupyter-logo-d'
+					width='100%'
+					height='100%'
+					fill='#4e4e4e'
+					style={{
+						mixBlendMode: 'normal',
+					}}
+					transform='matrix(.95992 0 0 .95992 22.618 19.896)'
+				/>
+				<use
+					xlinkHref='#jupyter-logo-e'
+					width='100%'
+					height='100%'
+					fill='#4e4e4e'
+					style={{
+						mixBlendMode: 'normal',
+					}}
+					transform='matrix(.95992 0 0 .95992 29.452 18.12)'
+				/>
+				<use
+					xlinkHref='#jupyter-logo-f'
+					width='100%'
+					height='100%'
+					fill='#4e4e4e'
+					style={{
+						mixBlendMode: 'normal',
+					}}
+					transform='matrix(.95992 0 0 .95992 34.175 19.8)'
+				/>
+				<use
+					xlinkHref='#jupyter-logo-g'
+					width='100%'
+					height='100%'
+					fill='#4e4e4e'
+					style={{
+						mixBlendMode: 'normal',
+					}}
+					transform='matrix(.95992 0 0 .95992 41.384 19.752)'
+				/>
+			</g>
+			<g
+				style={{
+					mixBlendMode: 'normal',
+				}}
+			>
+				<use
+					xlinkHref='#jupyter-logo-h'
+					width='100%'
+					height='100%'
+					fill='#767677'
+					style={{
+						mixBlendMode: 'normal',
+					}}
+					transform='matrix(.95992 0 0 .95992 35.145 .025)'
+				/>
+				<use
+					xlinkHref='#jupyter-logo-i'
+					width='100%'
+					height='100%'
+					fill='#f37726'
+					style={{
+						mixBlendMode: 'normal',
+					}}
+					transform='matrix(.95992 0 0 .95992 6.088 29.38)'
+				/>
+				<use
+					xlinkHref='#jupyter-logo-j'
+					width='100%'
+					height='100%'
+					fill='#f37726'
+					style={{
+						mixBlendMode: 'normal',
+					}}
+					transform='matrix(.95992 0 0 .95992 6.088 4.048)'
+				/>
+				<use
+					xlinkHref='#jupyter-logo-k'
+					width='100%'
+					height='100%'
+					fill='#9e9e9e'
+					style={{
+						mixBlendMode: 'normal',
+					}}
+					transform='matrix(.95992 0 0 .95992 6.155 40.726)'
+				/>
+				<use
+					xlinkHref='#jupyter-logo-l'
+					width='100%'
+					height='100%'
+					fill='#616262'
+					style={{
+						mixBlendMode: 'normal',
+					}}
+					transform='matrix(.95992 0 0 .95992 4.801 4.576)'
+				/>
+			</g>
+		</g>
+		<defs>
+			<path
+				id='jupyter-logo-a'
+				d='M1.745 5.475c0 1.558-.125 2.066-.445 2.44a1.94 1.94 0 0 1-1.3.498l.125.89a3.045 3.045 0 0 0 2.03-.738 3.561 3.561 0 0 0 .783-2.671V0H1.745v5.44z'
+			/>
+			<path
+				id='jupyter-logo-b'
+				d='M5.502 4.763c0 .668 0 1.264.053 1.78H4.496l-.071-1.059A2.466 2.466 0 0 1 2.26 6.695C1.23 6.695 0 6.135 0 3.846V.045h1.193v3.56c0 1.238.383 2.066 1.46 2.066A1.665 1.665 0 0 0 4.336 3.99V0h1.193v4.727z'
+			/>
+			<path
+				id='jupyter-logo-c'
+				d='M.053 2.273c0-.828 0-1.505-.053-2.12h1.068l.054 1.114A2.582 2.582 0 0 1 3.454.002c1.585 0 2.778 1.327 2.778 3.303 0 2.333-1.433 3.49-2.982 3.49a2.306 2.306 0 0 1-2.021-1.023v3.56H.053V2.3ZM1.23 4.009c.003.161.02.322.053.48a1.834 1.834 0 0 0 1.78 1.38c1.256 0 1.995-1.023 1.995-2.51 0-1.3-.695-2.413-1.95-2.413a2.048 2.048 0 0 0-1.878 1.95Z'
+			/>
+			<path
+				id='jupyter-logo-d'
+				d='M1.318.018 2.75 3.855c.151.427.312.944.418 1.327.125-.392.259-.89.419-1.354l1.3-3.81h1.255l-1.78 4.63c-.89 2.225-1.434 3.374-2.253 4.068a3.24 3.24 0 0 1-1.46.766l-.294-.997a3.16 3.16 0 0 0 1.042-.58 3.561 3.561 0 0 0 1.006-1.317.89.89 0 0 0 .098-.285 1.024 1.024 0 0 0-.08-.311L0 0h1.3z'
+			/>
+			<path
+				id='jupyter-logo-e'
+				d='M2.19 0v1.87H3.9v.89H2.19v3.508c0 .801.232 1.264.89 1.264.234.004.468-.023.695-.08l.053.89c-.34.118-.7.172-1.06.16a1.656 1.656 0 0 1-1.29-.498 2.395 2.395 0 0 1-.463-1.692V2.751H0v-.89h1.033V.276Z'
+			/>
+			<path
+				id='jupyter-logo-f'
+				d='M1.177 3.579A2.092 2.092 0 0 0 3.43 5.831a4.345 4.345 0 0 0 1.78-.338l.205.89a5.342 5.342 0 0 1-2.181.401A3.027 3.027 0 0 1 .01 3.508C.01 1.549 1.177 0 3.082 0 5.22 0 5.753 1.87 5.753 3.063c.012.183.012.368 0 .552H1.15Zm3.49-.89A1.683 1.683 0 0 0 3.011.766a1.968 1.968 0 0 0-1.825 1.923Z'
+			/>
+			<path
+				id='jupyter-logo-g'
+				d='M.053 2.192c0-.765 0-1.424-.053-2.03h1.068v1.274h.054A1.968 1.968 0 0 1 2.902.01a1.3 1.3 0 0 1 .339 0v1.113a1.78 1.78 0 0 0-.41 0 1.665 1.665 0 0 0-1.593 1.513 3.293 3.293 0 0 0-.054.552v3.464H.01V2.2Z'
+			/>
+			<path
+				id='jupyter-logo-h'
+				d='M6.03 2.836A3.018 3.018 0 1 1 2.889.005a2.982 2.982 0 0 1 3.143 2.83Z'
+			/>
+			<path
+				id='jupyter-logo-i'
+				d='M18.696 7.122C10.684 7.122 3.641 4.247 0 0a19.934 19.934 0 0 0 37.392 0C33.76 4.247 26.744 7.122 18.696 7.122Z'
+			/>
+			<path
+				id='jupyter-logo-j'
+				d='M18.696 5.897c8.013 0 15.055 2.876 18.697 7.123A19.934 19.934 0 0 0 0 13.02c3.641-4.256 10.648-7.123 18.696-7.123Z'
+			/>
+			<path
+				id='jupyter-logo-k'
+				d='M7.596 3.567A3.802 3.802 0 1 1 3.634.005a3.766 3.766 0 0 1 3.962 3.562Z'
+			/>
+			<path
+				id='jupyter-logo-l'
+				d='M2.25 4.38A2.19 2.19 0 1 1 4.379 2.1a2.217 2.217 0 0 1-2.127 2.28Z'
+			/>
+		</defs>
+	</svg>
+);
diff --git a/src/vs/workbench/browser/positronNewProjectWizard/components/logos/logoPython.tsx b/src/vs/workbench/browser/positronNewProjectWizard/components/logos/logoPython.tsx
@@ -0,0 +1,76 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (C) 2024 Posit Software, PBC. All rights reserved.
+ *--------------------------------------------------------------------------------------------*/
+
+// CSS.
+import 'vs/css!./projectTypeLogo';
+
+// React.
+import * as React from 'react';
+
+export const PythonLogo = () => (
+	// The below SVG React code was generated using https://github.com/gregberge/svgr on the
+	// Python logo svg file located at extensions/positron-python/resources/branding/python-icon.svg
+	// and then adapted for sizing and unique ids to avoid conflicts with other logos.
+	// Please see the corresponding license for the original Python logo file in
+	// extensions/positron-python/LICENSE.
+	<svg
+		xmlns='http://www.w3.org/2000/svg'
+		xmlSpace='preserve'
+		viewBox='0 0 100 100'
+		className='project-type-logo'
+	>
+		<linearGradient
+			id='python-blue-snake'
+			x1={732.466}
+			x2={826.801}
+			y1={-296.523}
+			y2={-377.686}
+			gradientTransform='matrix(.5625 0 0 -.568 -412.641 -165.03)'
+			gradientUnits='userSpaceOnUse'
+		>
+			<stop
+				offset={0}
+				style={{
+					stopColor: '#5c9fd3',
+				}}
+			/>
+			<stop
+				offset={1}
+				style={{
+					stopColor: '#316a99',
+				}}
+			/>
+		</linearGradient>
+		<path
+			fill='url(#python-blue-snake)'
+			d='M49.3.6c-4 0-7.8.4-11.1.9-9.8 1.7-11.6 5.4-11.6 12.1v8.8h23.2v2.9H17.9c-6.7 0-12.6 4.1-14.5 11.8-2.1 8.8-2.2 14.4 0 23.6C5 67.6 9 72.5 15.7 72.5h8V61.9c0-7.7 6.6-14.4 14.5-14.4h23.2c6.5 0 11.6-5.3 11.6-11.8V13.6c0-6.3-5.3-11-11.6-12.1-4-.6-8.2-.9-12.1-.9zM36.7 7.7c2.4 0 4.4 2 4.4 4.4 0 2.4-2 4.4-4.4 4.4-2.4 0-4.4-2-4.4-4.4.1-2.4 2-4.4 4.4-4.4z'
+		/>
+		<linearGradient
+			id='python-yellow-snake'
+			x1={863.271}
+			x2={829.584}
+			y1={-426.809}
+			y2={-379.148}
+			gradientTransform='matrix(.5625 0 0 -.568 -412.641 -165.03)'
+			gradientUnits='userSpaceOnUse'
+		>
+			<stop
+				offset={0}
+				style={{
+					stopColor: '#ffd53d',
+				}}
+			/>
+			<stop
+				offset={1}
+				style={{
+					stopColor: '#fee875',
+				}}
+			/>
+		</linearGradient>
+		<path
+			fill='url(#python-yellow-snake)'
+			d='M75.9 25.4v10.3c0 8-6.8 14.7-14.5 14.7H38.2c-6.3 0-11.6 5.4-11.6 11.8v22.1c0 6.3 5.5 10 11.6 11.8 7.3 2.2 14.4 2.5 23.2 0C67.2 94.4 73 91 73 84.3v-8.8H49.8v-2.9h34.8c6.7 0 9.3-4.7 11.6-11.8 2.4-7.3 2.3-14.3 0-23.6-1.7-6.7-4.8-11.8-11.6-11.8h-8.7zm-13.1 56c2.4 0 4.4 2 4.4 4.4 0 2.4-1.9 4.4-4.4 4.4-2.4 0-4.4-2-4.4-4.4.1-2.5 2-4.4 4.4-4.4z'
+		/>
+	</svg>
+);
diff --git a/src/vs/workbench/browser/positronNewProjectWizard/components/logos/logoR.svg b/src/vs/workbench/browser/positronNewProjectWizard/components/logos/logoR.svg
diff --git a/src/vs/workbench/browser/positronNewProjectWizard/components/logos/logoR.tsx b/src/vs/workbench/browser/positronNewProjectWizard/components/logos/logoR.tsx
@@ -0,0 +1,58 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (C) 2024 Posit Software, PBC. All rights reserved.
+ *--------------------------------------------------------------------------------------------*/
+
+// CSS.
+import 'vs/css!./projectTypeLogo';
+
+// React.
+import * as React from 'react';
+
+export const RLogo = () => (
+	// The below SVG React code was generated by using https://github.com/gregberge/svgr on the
+	// R logo svg file located at src/vs/workbench/browser/positronNewProjectWizard/components/logos/logoR.svg
+	// and then adapted for sizing and unique ids to avoid conflicts with other logos.
+	// Please see the corresponding license for the original Jupyter logo svg file in the top-level ThirdPartyNotices.txt.
+	<svg
+		xmlns='http://www.w3.org/2000/svg'
+		viewBox='0 0 724 561'
+		className='project-type-logo'
+	>
+		<defs>
+			<linearGradient
+				id='r-blue-circle'
+				x1={0}
+				x2={1}
+				y1={0}
+				y2={1}
+				gradientUnits='objectBoundingBox'
+				spreadMethod='pad'
+			>
+				<stop offset={0} stopColor='#CBCED0' />
+				<stop offset={1} stopColor='#84838B' />
+			</linearGradient>
+			<linearGradient
+				id='r-letter-r'
+				x1={0}
+				x2={1}
+				y1={0}
+				y2={1}
+				gradientUnits='objectBoundingBox'
+				spreadMethod='pad'
+			>
+				<stop offset={0} stopColor='#276DC3' />
+				<stop offset={1} stopColor='#165CAA' />
+			</linearGradient>
+		</defs>
+		<path
+			fill='url(#r-blue-circle)'
+			fillRule='evenodd'
+			d='M361.453 485.937C162.329 485.937.906 377.828.906 244.469.906 111.109 162.329 3 361.453 3 560.578 3 722 111.109 722 244.469c0 133.359-161.422 241.468-360.547 241.468Zm55.188-388.531c-151.352 0-274.047 73.908-274.047 165.078s122.695 165.078 274.047 165.078c151.351 0 263.046-50.529 263.046-165.078 0-114.513-111.695-165.078-263.046-165.078Z'
+		/>
+		<path
+			fill='url(#r-letter-r)'
+			fillRule='evenodd'
+			d='M550 377s21.822 6.585 34.5 13c4.399 2.226 12.01 6.668 17.5 12.5 5.378 5.712 8 11.5 8 11.5l86 145-139 .062L492 437s-13.31-22.869-21.5-29.5c-6.832-5.531-9.745-7.5-16.5-7.5h-33.026L421 558.974l-123 .052V152.938h247S657.5 154.967 657.5 262 550 377 550 377Zm-53.5-135.976-74.463-.048-.037 69.05 74.5-.024s34.5-.107 34.5-35.125c0-35.722-34.5-33.853-34.5-33.853Z'
+		/>
+	</svg>
+);
diff --git a/src/vs/workbench/browser/positronNewProjectWizard/components/logos/projectTypeLogo.css b/src/vs/workbench/browser/positronNewProjectWizard/components/logos/projectTypeLogo.css
@@ -0,0 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (C) 2024 Posit Software, PBC. All rights reserved.
+ *--------------------------------------------------------------------------------------------*/
+
+.project-type-logo {
+	width: 100%;
+	height: 100%;
+}