Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: blurry svgs in safari #2507

Merged
merged 10 commits into from
Jul 15, 2024
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
"@datadog/datadog-api-client": "^1.0.0-beta.7",
"@hashicorp/platform-cli": "^2.8.0",
"@hashicorp/platform-configs": "^0.2.0",
"@hashicorp/platform-nextjs-plugin": "^5.1.0",
"@hashicorp/platform-nextjs-plugin": "^5.1.1",
LeahMarieBush marked this conversation as resolved.
Show resolved Hide resolved
"@hashicorp/platform-postcss-config": "^0.2.0",
"@hashicorp/platform-tools": "^0.10.0",
"@hashicorp/platform-types": "^0.4.0",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function TryHcpCalloutPrebuilt({
}: {
productSlug: ProductSlugWithContent
}) {
const { ctaText, ctaUrl, description, heading } =
const { ctaText, ctaUrl, description, heading, image } =
tryHcpCalloutContent[productSlug]
return (
<TryHcpCallout
Expand All @@ -28,6 +28,7 @@ export function TryHcpCalloutPrebuilt({
description={description}
heading={heading}
productSlug={productSlug}
image={image}
/>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
* SPDX-License-Identifier: MPL-2.0
*/

import classNames from 'classnames'
import CardLink from 'components/card-link'
import {
Description,
Expand All @@ -13,6 +12,7 @@ import {
import { TryHcpCalloutProps } from 'components/try-hcp-callout/types'
import { HcpLogoHeading } from '../hcp-logo-heading'
import s from './try-hcp-callout.module.css'
import InlineSvg from '@hashicorp/react-inline-svg'

/**
* Renders an HCP themed callout card,
Expand All @@ -25,6 +25,7 @@ export function TryHcpCallout({
description,
ctaText,
ctaUrl,
image,
}: TryHcpCalloutProps) {
return (
<CardLink className={s.root} ariaLabel={ctaText} href={ctaUrl}>
Expand All @@ -40,7 +41,7 @@ export function TryHcpCallout({
</div>
<div className={s.imageContainer}>
<div className={s.imageWrapper}>
<div className={classNames(s.image, s[productSlug])} />
<InlineSvg src={image} className={s.image} />
</div>
</div>
</CardLink>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -73,44 +73,6 @@

/* Positions the image */
.image {
/* Default image is Vault, this gets used with generic HCP callouts too */
--background-src: url('./img/try-hcp-callout-ui-mock-vault.svg');

background-image: var(--background-src);
background-position: 0 0;
background-repeat: no-repeat;
background-size: auto;
height: var(--image-height);
left: 0;
position: absolute;
top: var(--image-top-offset);
width: var(--image-width);

&.boundary {
--background-src: url('./img/try-hcp-callout-ui-mock-boundary.svg');
}

&.consul {
--background-src: url('./img/try-hcp-callout-ui-mock-consul.svg');
}

&.packer {
--background-src: url('./img/try-hcp-callout-ui-mock-packer.svg');
}

&.terraform {
--background-src: url('./img/try-hcp-callout-ui-mock-terraform.svg');
}

&.vagrant {
--background-src: url('./img/try-hcp-callout-ui-mock-vagrant.svg');
}

&.vault {
--background-src: url('./img/try-hcp-callout-ui-mock-vault.svg');
}

&.waypoint {
--background-src: url('./img/try-hcp-callout-ui-mock-waypoint.svg');
}
}
17 changes: 16 additions & 1 deletion src/components/try-hcp-callout/content.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,17 @@

import { TryHcpCalloutProps } from 'components/try-hcp-callout/types'
import { ProductSlugWithContent } from './types'
import boundarySvg from './components/try-hcp-callout/img/try-hcp-callout-ui-mock-boundary.svg?include'
import consulSvg from './components/try-hcp-callout/img/try-hcp-callout-ui-mock-consul.svg?include'
import packerSvg from './components/try-hcp-callout/img/try-hcp-callout-ui-mock-packer.svg?include'
import terraformSvg from './components/try-hcp-callout/img/try-hcp-callout-ui-mock-terraform.svg?include'
import vagrantSvg from './components/try-hcp-callout/img/try-hcp-callout-ui-mock-vagrant.svg?include'
import vaultSvg from './components/try-hcp-callout/img/try-hcp-callout-ui-mock-vault.svg?include'
import waypointSvg from './components/try-hcp-callout/img/try-hcp-callout-ui-mock-waypoint.svg?include'
LeahMarieBush marked this conversation as resolved.
Show resolved Hide resolved

type HcpCalloutContent = Pick<
TryHcpCalloutProps,
'heading' | 'description' | 'ctaText' | 'ctaUrl'
'heading' | 'description' | 'ctaText' | 'ctaUrl' | 'image'
>

/**
Expand All @@ -27,48 +34,56 @@ export const tryHcpCalloutContent: Record<
description: 'Automate your infrastructure provisioning at any scale',
ctaText: 'Try HCP Terraform for free',
ctaUrl: 'https://app.terraform.io/public/signup/account',
image: terraformSvg,
},
boundary: {
heading: 'HCP Boundary',
description: 'Securely connect to clouds and remote hosts',
ctaText: 'Try HCP Boundary for free',
ctaUrl: 'https://portal.cloud.hashicorp.com/sign-up',
image: boundarySvg,
},
consul: {
heading: 'HCP Consul Dedicated',
description: 'Discover and securely connect your applications',
ctaText: 'Try HCP Consul Dedicated for free',
ctaUrl: 'https://portal.cloud.hashicorp.com/sign-up',
image: consulSvg,
},
packer: {
heading: 'HCP Packer',
description: 'Automate build management across your cloud providers',
ctaText: 'Try HCP Packer for free',
ctaUrl: 'https://portal.cloud.hashicorp.com/sign-up',
image: packerSvg,
},
vault: {
heading: 'HCP Vault Dedicated',
description: 'Secure your applications and protect sensitive data',
ctaText: 'Try HCP Vault Dedicated for free',
ctaUrl: 'https://portal.cloud.hashicorp.com/sign-up',
image: vaultSvg,
},
waypoint: {
heading: 'HCP Waypoint',
description: 'Simplify your application deployments across platforms',
ctaText: 'Try HCP Waypoint for free',
ctaUrl: 'https://portal.cloud.hashicorp.com/sign-up',
image: waypointSvg,
},
hcp: {
heading: 'HashiCorp Cloud Platform',
description: 'The fastest way to get up and running with HashiCorp tools',
ctaText: 'Try cloud for free',
ctaUrl: 'https://portal.cloud.hashicorp.com/sign-up',
image: vaultSvg,
},
vagrant: {
heading: 'Vagrant Cloud',
description:
'Virtual boxes for Linux, Laravel and any development environment',
ctaText: 'Try Vagrant Cloud for free',
ctaUrl: 'https://app.vagrantup.com/boxes/search',
image: vagrantSvg,
},
}
1 change: 1 addition & 0 deletions src/components/try-hcp-callout/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export interface TryHcpCalloutProps {
description: string
ctaText: string
ctaUrl: string
image: SVGElement
}

export interface TryHcpCalloutCompactProps {
Expand Down
Loading