[Assembly]: Branding Refresh (hashicorp#11118)

* style: update gray brand colors (hashicorp#11092) * Style: Update brand colors (hashicorp#11224) * style: update brand colors * chore: upgrade react-components * style: update use cases page btn --> vault brand * chore: home page component api updates * style: fix link colors * run npm audit * upgrade downloads page * typo fixes * fix husky, run lint * roll back husky upgrade * style(home callouts): body copy gray -2 * style: testing hashi-stack-menu prerelease * style: upgrade components --> color contrast (hashicorp#11328) * chore: upgrades components w/ new styles * refactor(use-cases pages): to use FeaturedSlider component * style(BeforeAfterDiagram): swap check icon * style(use-cases-cta): adjust background color --> vault primary * chore(community): pass to VerticalBlockTextList * chore(deps): adds tippy.js * chore(deps): upgrade product downloads pre-release * fix(subnav): use asPath to set active item * chore: upgrade deps to stable * style: home callouts body copy to black * chore: upgrade hashi-stack-menu to stable * chore: upgrade deps * style(use-cases): update background and button colors * chore: upgrade deps body copy color * chore: upgrades alert-banner * fix: remove package.json * content(home): removes hero background image * content(home): updates assets * content(use-cases): updates assets * style(before-after-diagram): adjust scaling styles * content:swap svgs for pngs * style: updates before/after diagram * chore: testing product download page pre-release * content: updates consul & nomad logomarks * chore: updates product download page to stable Co-authored-by: Jeff Escalante <[email protected]>
g-psantos · May 3, 2021 · 7051fe7 · 7051fe7
1 parent 60578dc
commit 7051fe7
Show file tree

Hide file tree

Showing 67 changed files with 31,917 additions and 8,954 deletions.
diff --git a/website/components/before-after-diagram/index.jsx b/website/components/before-after-diagram/index.jsx
@@ -1,7 +1,7 @@
 import Image from '@hashicorp/react-image'
 import InlineSvg from '@hashicorp/react-inline-svg'
-import alertIcon from 'public/img/icons/alert-icon.svg?include'
-import checkIcon from 'public/img/icons/check-icon.svg?include'
+import alertIcon from 'public/img/icons/alert.svg?include'
+import checkIcon from 'public/img/icons/check.svg?include'
 import fragment from './fragment.graphql'
 import s from './style.module.css'
 function BeforeAfterDiagram(props) {
@@ -24,9 +24,8 @@ function BeforeAfterDiagram(props) {
  </div>
  <div className={s.contentContainer}>
  <span className={s.iconLineContainer}>
- <span className={s.lineSegmentOne} />
  <InlineSvg className={s.beforeIcon} src={alertIcon} />
- <span className={s.lineSegmentTwo} />
+ <span className={s.lineSegment} />
  </span>
  <div>
  {beforeHeadline && (

diff --git a/website/components/before-after-diagram/style.module.css b/website/components/before-after-diagram/style.module.css
@@ -4,7 +4,7 @@
  /* CSS custom properties to control theming */
  --product-color: var(--black);
  --gray-6-transparent: rgba(210, 212, 219, 0);
- --after-bullet-background: url('/img/icons/check-circle.svg');
+ --after-bullet-background: url('/img/icons/check-square-vault.svg');
  --after-bullet-height: 18px;
 
  display: flex;
@@ -22,29 +22,6 @@
  margin-left: 40px;
  margin-right: 0;
  }
-
- &[data-theme='vault'] {
- --after-bullet-background: url('/img/icons/check-circle-blue.svg');
- --after-bullet-height: 19px;
- }
-
- &[data-theme='consul'] {
- --product-color: var(--consul);
- --after-bullet-background: url('/img/icons/check-circle-pink.svg');
- --after-bullet-height: 19px;
- }
-
- &[data-theme='terraform'] {
- --product-color: var(--terraform);
- --after-bullet-background: url('/img/icons/check-circle-purple.svg');
- --after-bullet-height: 19px;
- }
-
- &[data-theme='nomad'] {
- --product-color: var(--nomad);
- --after-bullet-background: url('/img/icons/check-circle-green.svg');
- --after-bullet-height: 19px;
- }
 }
 
 /* Before and after columns */
@@ -81,7 +58,7 @@
 /* Diagram images */
 
 .image {
- align-items: center;
+ align-items: flex-end;
  display: flex;
  height: 320px;
  justify-content: center;
@@ -113,10 +90,30 @@
  width: 100%;
  }
 
+ & picture {
+ height: 100%;
+ }
  & img,
  & svg {
- max-height: 100%;
+ height: 100%;
  max-width: 100%;
+ object-fit: contain;
+ }
+
+ @media (--medium-up) {
+ height: unset;
+
+ & div {
+ height: unset;
+ }
+
+ & picture {
+ height: unset;
+ }
+ & img,
+ & svg {
+ height: unset;
+ }
  }
 }
 
@@ -141,55 +138,19 @@
 /* Line segment above content (before side only) */
 
 .lineSegment {
+ background: black;
  display: block;
- height: 1px;
+ height: 2px;
+ left: calc(50% + 30px);
  position: absolute;
  top: 12px;
-}
-
-.lineSegmentOne {
- background-image: linear-gradient(
- 90deg,
- var(--gray-6-transparent) 0%,
- var(--gray-6) 100%
- );
- composes: lineSegment;
- right: calc(50% + 20px);
- width: calc(50% + 140px);
-
- @media (max-width: 767px) {
- background-image: linear-gradient(
- 180deg,
- var(--gray-6-transparent) 0%,
- var(--gray-6) 100%
- );
- height: 245px;
- right: auto;
- top: -253px;
- width: 1px;
- }
-}
-
-.lineSegmentTwo {
- background-image: linear-gradient(
- 90deg,
- var(--gray-6) 0%,
- var(--product-color) 100%
- );
- composes: lineSegment;
- left: calc(50% + 20px);
- width: calc(100% - 14px);
+ width: calc(100% - 24px);
 
  @media (max-width: 767px) {
- background-image: linear-gradient(
- 180deg,
- var(--gray-6) 0%,
- var(--product-color) 100%
- );
  height: calc(100% + 375px);
  left: auto;
- top: 32px;
- width: 1px;
+ top: 38px;
+ width: 2px;
  }
 
  @media (max-width: 640px) {
@@ -208,10 +169,28 @@
  height: calc(100% + 218px);
  }
 
+ &::before {
+ border-radius: 100%;
+ border-style: solid;
+ border-width: 5.5px 0 5.5px 8px;
+ border-width: 2px;
+ content: '';
+ height: 8px;
+ left: -8px;
+ position: absolute;
+ top: -3px;
+ width: 8px;
+
+ @media (max-width: 767px) {
+ left: -3px;
+ top: -8px;
+ }
+ }
+
  &::after {
  border-color: transparent transparent transparent var(--product-color);
  border-style: solid;
- border-width: 5.5px 0 5.5px 8px;
+ border-width: 6px 0 6px 8px;
  content: '';
  height: 0;
  position: absolute;
@@ -253,7 +232,7 @@
 /* Content container */
 
 .contentContainer {
- border: 1px solid var(--gray-6);
+ border: 1px solid var(--gray-5);
  flex-grow: 1;
  padding: 24px 32px 20px;
  position: relative;
@@ -282,7 +261,7 @@
 
  &::before {
  border-color: rgba(229, 230, 235, 0);
- border-bottom-color: var(--gray-6);
+ border-bottom-color: var(--gray-5);
  border-width: 18px;
  margin-left: -18px;
  }
@@ -309,7 +288,7 @@
 /* Content headline */
 
 .contentHeadline {
- border-bottom: 1px solid var(--gray-6);
+ border-bottom: 1px solid var(--gray-5);
  color: var(--black);
  composes: g-type-display-3 from global;
  margin: 0 0 24px;
@@ -351,8 +330,9 @@
  composes: content;
 
  & li::before {
- background: url('/img/icons/alert-triangle.svg');
- height: 20px;
+ background: url('/img/icons/alert-check.svg');
+ background-repeat: no-repeat;
+ height: var(--after-bullet-height);
  margin-top: 3px;
  width: 20px;
  }

diff --git a/website/components/hcp-callout-section/HCPCalloutSection.module.css b/website/components/hcp-callout-section/HCPCalloutSection.module.css
@@ -38,11 +38,8 @@
  margin-top: 0;
  margin-bottom: 8px;
  }
- & .chin {
- color: var(--gray-4);
- }
  & .description {
- color: var(--gray-4);
+ color: var(--gray-2);
  margin-top: 28px;
  margin-bottom: 0;
 

diff --git a/website/components/homepage-hero/index.jsx b/website/components/homepage-hero/index.jsx
@@ -15,17 +15,11 @@ export default function HomepageHero({
  <div className={styles.homepageHero}>
  <Hero
  data={{
- backgroundImage: {
- alt: null,
- size: 55617,
- url: 'https://www.datocms-assets.com/2885/1539894412-vault-bg.jpg',
- width: 3196,
- },
  backgroundTheme: 'light',
  buttons: buttons.slice(0, 2),
  centered: false,
  description: description,
- theme: 'vault-gray',
+ product: 'vault',
  title: title,
  videos: [
  {

diff --git a/website/components/subnav/index.jsx b/website/components/subnav/index.jsx
@@ -27,7 +27,7 @@ export default function ProductSubnav() {
  url: '/downloads',
  },
  ]}
- currentPath={router.pathname}
+ currentPath={router.asPath}
  menuItems={menuItems}
  menuItemsAlign="right"
  constrainWidth

diff --git a/website/components/use-case-cta-section/index.jsx b/website/components/use-case-cta-section/index.jsx
@@ -11,14 +11,13 @@ export default function UseCaseCtaSection() {
  linkType="download"
  theme={{
  variant: 'primary',
- background: 'dark',
- brand: 'neutral'
+ brand: 'neutral',
  }}
  />
  <Button
  url="/docs"
  title="Explore Docs"
- theme={{ variant: 'secondary', background: 'dark' }}
+ theme={{ variant: 'secondary' }}
  />
  </div>
  </section>

diff --git a/website/components/use-case-cta-section/style.css b/website/components/use-case-cta-section/style.css
@@ -1,7 +1,7 @@
 .g-section-block.g-cta-section {
  -webkit-box-align: center;
  align-items: center;
- background: var(--gray-2);
+ background: var(--vault-secondary);
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
@@ -10,7 +10,7 @@
  padding-right: 15px;
  position: relative;
  text-align: center;
- color: var(--white);
+ color: var(--black);
 
  & .g-btn.white {
  background: var(--white);

diff --git a/website/next-env.d.ts b/website/next-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
diff --git a/website/next.config.js b/website/next.config.js
@@ -1,9 +1,7 @@
 const withHashicorp = require('@hashicorp/nextjs-scripts')
 const redirects = require('./redirects.next')
 
-module.exports = withHashicorp({
- transpileModules: ['is-absolute-url', '@hashicorp/react-.*'],
-})({
+module.exports = withHashicorp()({
  svgo: { plugins: [{ removeViewBox: false }] },
  rewrites: () => [
  {