Install page enhancement: Move OS downloads from tabs to individual c…

…ards (#2241)

* Styling complete for ARM users notes

* Updated ARM user notes after consulting Consul docs and release eng teams

* Added 'middle' merchandising slot

* Moved consul tool below release info on enterprise page

src/views/product-downloads-view/boundary/components/desktop-client-callout/desktop-client-callout.module.css

@@ -7,3 +7,25 @@
 	color: var(--token-color-foreground-strong);
 	margin-bottom: 16px;
 }
+
+.downloadContainer {
+	display: grid;
+	gap: 24px;
+	@media (--dev-dot-tablet-up) {
+		grid-template-columns: 1fr 1fr;
+		gap: 28px 24px;
+	}
+}
+
+.downloadCard {
+	display: grid;
+	grid-template-columns: 16px 1fr 24px;
+	align-items: center;
+	column-gap: 8px;
+	&:last-child {
+		margin-bottom: 0;
+	}
+	@media (--dev-dot-tablet-up) {
+		grid-template-columns: 16px 1fr 90px;
+	}
+}

src/views/product-downloads-view/boundary/components/desktop-client-callout/index.tsx

@@ -5,8 +5,9 @@
 
 // Components
 import Card from 'components/card'
+import CardWithLink from 'views/product-downloads-view/components/card-with-link'
+import MobileDownloadStandaloneLink from 'components/mobile-download-standalone-link'
 import Heading from 'components/heading'
-import IconCardLinkGridList from 'components/icon-card-link-grid-list'
 import { IconDownload16 } from '@hashicorp/flight-icons/svg-react/download-16'
 // Types
 import { DesktopClientProps, ReleaseBuild } from './types'
@@ -25,21 +26,35 @@ function DesktopClientCallout({
 	desktopClientProps: DesktopClientProps
 }) {
 	const { latestVersion, builds } = desktopClientProps
-
 	return (
 		<Card elevation="low">
-			<Heading className={s.heading} level={2} size={200} weight="semibold">
+			<Heading
+				className={s.heading}
+				level={2}
+				size={400}
+				id="operating-system-desktop"
+				weight="bold"
+			>
 				{`Desktop Client v${latestVersion}`}
 			</Heading>
-			<IconCardLinkGridList
-				fixedColumns={3}
-				gridGap="16px"
-				cards={builds.map(({ os, url, filename, arch }: ReleaseBuild) => {
-					const icon = operatingSystemIcons[os] || <IconDownload16 />
-					const text = `.${getFileExtension(filename)} (${humanArch(arch)})`
-					return { icon, url, text }
-				})}
-			/>
+			<div className={s.downloadContainer}>
+				{builds.map(({ os, url, filename, arch }: ReleaseBuild) => (
+					<CardWithLink
+						className={s.downloadCard}
+						key={filename}
+						icon={operatingSystemIcons[os] || <IconDownload16 />}
+						heading={`.${getFileExtension(filename)} (${humanArch(arch)})`}
+						link={
+							<MobileDownloadStandaloneLink
+								ariaLabel={`download .${getFileExtension(
+									filename
+								)}, architecture ${arch}`}
+								href={url}
+							/>
+						}
+					/>
+				))}
+			</div>
 		</Card>
 	)
 }

src/views/product-downloads-view/boundary/index.tsx

@@ -24,7 +24,7 @@ function BoundaryDownloadsView({
 		<ProductDownloadsView
 			{...baseProps}
 			merchandisingSlot={{
-				position: 'below',
+				position: 'middle',
 				slot: <DesktopClientCallout desktopClientProps={desktopClientProps} />,
 			}}
 		/>

src/views/product-downloads-view/components/card-with-link/card-with-link.module.css

@@ -6,10 +6,14 @@
 .root {
 	display: flex;
 	padding: 16px;
-	margin-bottom: 24px;
 	justify-content: space-between;
 }
 
 .contentHeading {
-	margin-bottom: 4px;
+	color: var(--token-color-foreground-strong);
+}
+
+.contentSubheading {
+	color: var(--token-color-foreground-faint);
+	margin-top: 4px;
 }

src/views/product-downloads-view/components/card-with-link/index.tsx

@@ -12,32 +12,37 @@ import Text from 'components/text'
 
 // Local imports
 import s from './card-with-link.module.css'
+import classNames from 'classnames'
 
 interface CardWithLinkProps {
+	className?: string
 	heading: string
-	subheading: string | ReactNode
+	subheading?: string | ReactNode
 	icon?: ReactNode
 	link?: ReactNode
 }
 
 const CardWithLink = ({
+	className,
 	heading,
 	subheading,
 	icon,
 	link,
 }: CardWithLinkProps) => {
 	return (
-		<Card className={s.root} elevation="base">
-			{typeof icon !== undefined ? icon : null}
+		<Card className={classNames(s.root, className)} elevation="base">
+			{typeof icon !== 'undefined' ? icon : null}
 			<div className={s.contentContainer}>
 				<Text className={s.contentHeading} size={200} weight="semibold">
 					{heading}
 				</Text>
-				<Text className={s.contentSubheading} size={200} weight="regular">
-					{subheading}
-				</Text>
+				{typeof subheading !== 'undefined' ? (
+					<Text className={s.contentSubheading} size={200} weight="regular">
+						{subheading}
+					</Text>
+				) : null}
 			</div>
-			{typeof link !== undefined ? link : null}
+			{typeof link !== 'undefined' ? link : null}
 		</Card>
 	)
 }

src/views/product-downloads-view/components/downloads-section/downloads-section.module.css

@@ -2,61 +2,47 @@
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
  */
-
-.root {
-	margin-bottom: 48px;
-}
-
-.cardHeader {
-	align-items: center;
-	display: flex;
-
-	/* Note: logical order is Vault version, then OS.
-     But in flex layout, we want Vault version after OS heading,
-     so that it appears in the top left of the downloads section box */
-	flex-direction: row-reverse;
-	flex-wrap: wrap;
-	gap: 12px;
-	justify-content: space-between;
-	padding-bottom: 12px;
+.card {
+	margin-bottom: 32px;
+	padding: 16px;
 }
 
-.operatingSystemTitle {
+.heading {
 	color: var(--token-color-foreground-strong);
-
-	/* Flex-grow as much as possible to keep .versionSwitcherWrapper small */
-	flex-grow: 100;
+	margin-bottom: 16px;
 }
 
 .tabContent {
 	margin-top: 16px;
 }
 
-.subHeading {
-	color: var(--token-color-foreground-strong);
-	margin-bottom: 16px;
-	margin-top: 24px;
-}
-
-.textAndLinkCard {
-	align-items: center;
+.downloadContainer {
 	display: flex;
-	justify-content: space-between;
-
-	&:not(:last-child) {
-		margin-bottom: 16px;
+	gap: 24px;
+	flex-direction: column;
+	@media (--dev-dot-tablet-up) {
+		flex-wrap: wrap;
+		flex-direction: row;
 	}
 }
 
-.textAndLinkCardTextContainer {
-	margin-right: 16px;
+.downloadCard {
+	&:last-child {
+		margin-bottom: 0;
+	}
+	@media (--dev-dot-tablet-up) {
+		flex: 1 1 auto;
+		width: calc(50% - 12px);
+		&:last-child {
+			margin-bottom: auto;
+		}
+	}
 }
 
-.textAndLinkCardLabel {
-	color: var(--token-color-foreground-strong);
-	margin-bottom: 4px;
+.codeBlock {
+	margin-bottom: 32px;
 }
 
-.textAndLinkCardVersionLabel {
-	color: var(--token-color-foreground-faint);
+.codeBlocks {
+	margin-bottom: 24px;
 }