diff --git a/src/views/product-downloads-view/components/card-with-link/card-with-link.module.css b/src/views/product-downloads-view/components/card-with-link/card-with-link.module.css
new file mode 100644
index 0000000000..df29b33a5d
--- /dev/null
+++ b/src/views/product-downloads-view/components/card-with-link/card-with-link.module.css
@@ -0,0 +1,15 @@
+/* *
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.root {
+ display: flex;
+ padding: 16px;
+ margin-bottom: 24px;
+ justify-content: space-between;
+}
+
+.contentHeading {
+ margin-bottom: 4px;
+}
diff --git a/src/views/product-downloads-view/components/card-with-link/index.tsx b/src/views/product-downloads-view/components/card-with-link/index.tsx
new file mode 100644
index 0000000000..bdc6cc5f6b
--- /dev/null
+++ b/src/views/product-downloads-view/components/card-with-link/index.tsx
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+// Third-party imports
+import { ReactNode } from 'react'
+
+// Global imports
+import Card from 'components/card'
+import Text from 'components/text'
+
+// Local imports
+import s from './card-with-link.module.css'
+
+interface CardWithLinkProps {
+ heading: string
+ subheading: string | ReactNode
+ icon?: ReactNode
+ link?: ReactNode
+}
+
+const CardWithLink = ({
+ heading,
+ subheading,
+ icon,
+ link,
+}: CardWithLinkProps) => {
+ return (
+
+ {typeof icon !== undefined ? icon : null}
+
+
+ {heading}
+
+
+ {subheading}
+
+
+ {typeof link !== undefined ? link : null}
+
+ )
+}
+
+export default CardWithLink
diff --git a/src/views/product-downloads-view/components/downloads-section/downloads-section.module.css b/src/views/product-downloads-view/components/downloads-section/downloads-section.module.css
index 26bfd22d20..18142d20fe 100644
--- a/src/views/product-downloads-view/components/downloads-section/downloads-section.module.css
+++ b/src/views/product-downloads-view/components/downloads-section/downloads-section.module.css
@@ -38,10 +38,6 @@
margin-top: 24px;
}
-.specialSubHeading {
- margin-bottom: 8px;
-}
-
.textAndLinkCard {
align-items: center;
display: flex;
@@ -64,31 +60,3 @@
.textAndLinkCardVersionLabel {
color: var(--token-color-foreground-faint);
}
-
-.enterpriseLegalNotice {
- background-color: var(--token-color-surface-faint);
- border-radius: 6px;
- border: 1px solid var(--token-color-border-strong);
- display: flex;
- gap: 12px;
- margin-top: 24px;
- padding: 16px;
-}
-
-.enterpriseLegalNoticeIcon {
- color: var(--token-color-foreground-primary);
- display: flex;
- flex-grow: 0;
- flex-shrink: 0;
- height: 20px;
- width: 20px;
-}
-
-.enterpriseLegalNoticeTitle {
- color: var(--token-color-foreground-primary);
-}
-
-.enterpriseLegalNoticeText {
- color: var(--token-color-foreground-primary);
- margin-top: 4px;
-}
diff --git a/src/views/product-downloads-view/components/downloads-section/index.tsx b/src/views/product-downloads-view/components/downloads-section/index.tsx
index b1f30355d3..773bb9292e 100644
--- a/src/views/product-downloads-view/components/downloads-section/index.tsx
+++ b/src/views/product-downloads-view/components/downloads-section/index.tsx
@@ -5,33 +5,27 @@
// Third-party imports
import { ReactElement, useMemo } from 'react'
-import classNames from 'classnames'
// HashiCorp imports
-import { IconExternalLink16 } from '@hashicorp/flight-icons/svg-react/external-link-16'
-import { IconExternalLink24 } from '@hashicorp/flight-icons/svg-react/external-link-24'
-import { IconInfo24 } from '@hashicorp/flight-icons/svg-react/info-24'
import CodeBlock from '@hashicorp/react-code-block'
import CodeTabs from '@hashicorp/react-code-block/partials/code-tabs'
// Global imports
-import { trackProductDownload } from 'lib/analytics'
-import { useCurrentProduct } from 'contexts'
-import { prettyOs } from 'views/product-downloads-view/helpers'
-import { useCurrentVersion } from 'views/product-downloads-view/contexts'
import Card from 'components/card'
-import MobileDownloadStandaloneLink from 'components/mobile-download-standalone-link'
import Heading, { HeadingProps } from 'components/heading'
-import InlineLink from 'components/inline-link'
-import MobileStandaloneLink from 'components/mobile-standalone-link'
+import MobileDownloadStandaloneLink from 'components/mobile-download-standalone-link'
import Tabs, { Tab } from 'components/tabs'
import Text from 'components/text'
+import { trackProductDownload } from 'lib/analytics'
+import { useCurrentVersion } from 'views/product-downloads-view/contexts'
+import { prettyOs } from 'views/product-downloads-view/helpers'
// Local imports
-import { DownloadsSectionProps } from './types'
-import { groupDownloadsByOS, groupPackageManagersByOS } from './helpers'
-import s from './downloads-section.module.css'
import { PackageManager } from 'views/product-downloads-view/types'
+import ReleaseInformationSection from '../release-information'
+import s from './downloads-section.module.css'
+import { groupDownloadsByOS, groupPackageManagersByOS } from './helpers'
+import { DownloadsSectionProps } from './types'
const SHARED_HEADING_LEVEL_3_PROPS = {
className: s.subHeading,
@@ -139,117 +133,6 @@ const BinaryDownloadsSection = ({
)
}
-const ChangelogSection = ({ selectedRelease }) => {
- const { name, version } = selectedRelease
- return (
- <>
-
- Release information
-
-
-
-
- Changelog
-
-
- Version: {version}
-
-
- }
- size24Icon={}
- iconPosition="trailing"
- opensInNewTab
- text="GitHub"
- />
-
-
- )
-}
-
-const NotesSection = ({ selectedRelease }) => {
- const currentProduct = useCurrentProduct()
- const { name, shasums, shasums_signature, version } = selectedRelease
-
- return (
- <>
-
- Notes
-
-
- You can find the{' '}
-
- SHA256 checksums for {currentProduct.name} {version}
- {' '}
- online and you can{' '}
-
- verify the checksums signature file
- {' '}
- which has been signed using{' '}
-
- {"HashiCorp's GPG key"}
-
- .
-
-
- )
-}
-
-/**
- * @TODO replace with InlineAlert
- * ref: https://design-system-components-hashicorp.vercel.app/components/alert
- */
-const EnterpriseLegalNotice = () => {
- return (
-
-
-
-
- Terms of use
-
-
- The following shall apply unless your organization has a separately
- signed Enterprise License Agreement or Evaluation Agreement governing
- your use of the package: Enterprise packages in this repository are
- subject to the license terms located in the package. Please read the
- license terms prior to using the package. Your installation and use of
- the package constitutes your acceptance of these terms. If you do not
- accept the terms, do not use the package.
-
-
-
-
-
-
- Operating System
-
-
-
- {Object.keys(downloadsByOS).map((os) => {
- const packageManagers = packageManagersByOS[os]
- const prettyOSName = prettyOs(os)
-
- /**
- * TODO: it might be nice to introduce a local Context here with all
- * the information needed so that these helper components don't have
- * APIs that could potentially require changes with every visual
- * change.
- */
- return (
-
-
- {isLatestVersion && (
-
+
+
+
+
+ Operating System
+
+
+
+ {Object.keys(downloadsByOS).map((os) => {
+ const packageManagers = packageManagersByOS[os]
+ const prettyOSName = prettyOs(os)
+
+ /**
+ * TODO: it might be nice to introduce a local Context here with all
+ * the information needed so that these helper components don't have
+ * APIs that could potentially require changes with every visual
+ * change.
+ */
+ return (
+
+
+ {isLatestVersion && (
+
+ )}
+
- )}
-
-
-
- {isEnterpriseMode ?
: null}
-
-
+
-
- Looking for more?
-
-
-
- Official releases
-
-
- All officially supported HashiCorp release channels and their security
- guarantees.
-
-
-
- )
-}
-
-export default OfficialReleasesSection
diff --git a/src/views/product-downloads-view/components/official-releases-section/official-releases-section.module.css b/src/views/product-downloads-view/components/official-releases-section/official-releases-section.module.css
deleted file mode 100644
index 6040584d8c..0000000000
--- a/src/views/product-downloads-view/components/official-releases-section/official-releases-section.module.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-.root {
- margin-bottom: 48px;
-}
-
-.cardTitle {
- color: var(--token-color-foreground-strong);
- margin-bottom: 4px;
-}
-
-.cardBody {
- color: var(--token-color-foreground-faint);
-}
diff --git a/src/views/product-downloads-view/components/release-information/index.tsx b/src/views/product-downloads-view/components/release-information/index.tsx
new file mode 100644
index 0000000000..2964acc8f2
--- /dev/null
+++ b/src/views/product-downloads-view/components/release-information/index.tsx
@@ -0,0 +1,159 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+// Third-party imports
+import { ReactElement } from 'react'
+
+// HashiCorp imports
+import { IconExternalLink16 } from '@hashicorp/flight-icons/svg-react/external-link-16'
+import { IconExternalLink24 } from '@hashicorp/flight-icons/svg-react/external-link-24'
+import { IconInfo16 } from '@hashicorp/flight-icons/svg-react/info-16'
+
+// Global imports
+import Heading from 'components/heading'
+import InlineLink from 'components/inline-link'
+import Text from 'components/text'
+import { useCurrentProduct } from 'contexts'
+import viewStyles from 'views/product-downloads-view/product-downloads-view.module.css'
+
+import InlineAlert from 'components/inline-alert'
+import MobileStandaloneLink from 'components/mobile-standalone-link'
+import { ReleaseVersion } from 'lib/fetch-release-data'
+import CardWithLink from '../card-with-link'
+import s from './release-information.module.css'
+
+const NoteCard = ({ selectedRelease }) => {
+ const currentProduct = useCurrentProduct()
+ const { name, shasums, shasums_signature, version } = selectedRelease
+
+ return (
+
+ You can find the{' '}
+
+ SHA256 checksums for {currentProduct.name} {version}
+ {' '}
+ online and you can{' '}
+
+ verify the checksums signature file
+ {' '}
+ which has been signed using{' '}
+
+ {"HashiCorp's GPG key"}
+
+ .
+
+ }
+ icon={}
+ />
+ )
+}
+
+const ChangelogNote = ({ selectedRelease }) => {
+ const { name, version } = selectedRelease
+ const capitalizedName = name.charAt(0).toUpperCase() + name.slice(1)
+
+ return (
+ <>
+ }
+ size24Icon={}
+ iconPosition="trailing"
+ opensInNewTab
+ text="GitHub"
+ />
+ }
+ />
+
+ )
+}
+
+const EnterpriseLegalNote = () => {
+ return (
+
+ The following shall apply unless your organization has a separately
+ signed Enterprise License Agreement or Evaluation Agreement governing
+ your use of the package: Enterprise packages in this repository are
+ subject to the license terms located in the package. Please read the
+ license terms prior to using the package. Your installation and use of
+ the package constitutes your acceptance of these terms. If you do not
+ accept the terms, do not use the package.
+
+ }
+ color="highlight"
+ icon={}
+ />
+ )
+}
+
+const OfficialReleasesCard = () => {
+ return (
+ }
+ size24Icon={}
+ iconPosition="trailing"
+ opensInNewTab
+ text="View all"
+ />
+ }
+ />
+ )
+}
+
+interface ReleaseInformationSectionProps {
+ selectedRelease: ReleaseVersion
+ isEnterpriseMode: boolean
+}
+
+const ReleaseInformationSection = ({
+ selectedRelease,
+ isEnterpriseMode,
+}: ReleaseInformationSectionProps): ReactElement => {
+ return (
+ <>
+
+ Release Information
+
+
+
+
+ {isEnterpriseMode ? : null}
+
+ )
+}
+
+export default ReleaseInformationSection
diff --git a/src/views/product-downloads-view/components/release-information/release-information.module.css b/src/views/product-downloads-view/components/release-information/release-information.module.css
new file mode 100644
index 0000000000..c3c68ee3a6
--- /dev/null
+++ b/src/views/product-downloads-view/components/release-information/release-information.module.css
@@ -0,0 +1,14 @@
+/* *
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.alert {
+ margin-bottom: 24px;
+}
+
+.cardIcon {
+ margin-top: 3px;
+ max-height: 16px;
+ max-width: 16px;
+}
diff --git a/src/views/product-downloads-view/index.tsx b/src/views/product-downloads-view/index.tsx
index d34d333139..330f74fe36 100644
--- a/src/views/product-downloads-view/index.tsx
+++ b/src/views/product-downloads-view/index.tsx
@@ -33,7 +33,6 @@ import { CurrentVersionProvider, useCurrentVersion } from './contexts'
import {
DownloadsSection,
FeaturedLearnCardsSection,
- OfficialReleasesSection,
PageHeader,
SidecarMarketingCard,
} from './components'
@@ -130,7 +129,7 @@ const ProductDownloadsViewContent = ({
selectedRelease={releases.versions[currentVersion]}
/>
{merchandisingSlot?.position === 'below' ? merchandisingSlot.slot : null}
-
+