diff --git a/.changeset/yellow-houses-jam.md b/.changeset/yellow-houses-jam.md new file mode 100644 index 000000000..01d99e70d --- /dev/null +++ b/.changeset/yellow-houses-jam.md @@ -0,0 +1,10 @@ +--- +'@hashicorp/react-accordion': minor +'@hashicorp/react-alert-banner': minor +'@hashicorp/react-code-block': minor +'@hashicorp/react-logo-grid': minor +'@hashicorp/react-split-rich-cta-list': minor +'@hashicorp/react-tabs': minor +--- + +Use next/image instead of react-inline-svg diff --git a/next-env.d.ts b/next-env.d.ts index 2532e77ab..4f11a03dc 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,4 +1,5 @@ /// +/// // NOTE: This file should not be edited // see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/next.config.js b/next.config.js index fef7754ce..245532484 100644 --- a/next.config.js +++ b/next.config.js @@ -12,7 +12,6 @@ module.exports = withHashicorp({ '@hashicorp/sentinel-embedded', '@hashicorp/flight-icons', ], - nextOptimizedImages: true, })( withSwingset({ componentsRoot: 'packages/**/*', @@ -41,7 +40,7 @@ module.exports = withHashicorp({ ], images: { domains: ['www.datocms-assets.com'], - disableStaticImages: true, + disableStaticImages: false, }, webpack(config) { // disable `exports` support for framer-motion. This will cause Webpack to diff --git a/package-lock.json b/package-lock.json index 4b0980c58..8c4dffd8b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39548,7 +39548,6 @@ "version": "3.0.2", "license": "MPL-2.0", "dependencies": { - "@hashicorp/react-inline-svg": "^6.0.3", "classnames": "^2.3.1" }, "peerDependencies": { @@ -39590,7 +39589,6 @@ "license": "MPL-2.0", "dependencies": { "@hashicorp/platform-product-meta": "^0.1.0", - "@hashicorp/react-inline-svg": "^6.0.3", "@radix-ui/react-visually-hidden": "^1.0.2", "js-cookie": "^2.2.1", "slugify": "^1.6.5" @@ -39694,7 +39692,7 @@ }, "packages/card": { "name": "@hashicorp/react-card", - "version": "0.14.0", + "version": "0.15.0", "license": "MPL-2.0", "dependencies": { "@hashicorp/react-expandable-arrow": "^0.1.0", @@ -39749,7 +39747,6 @@ "version": "6.4.0", "license": "MPL-2.0", "dependencies": { - "@hashicorp/react-inline-svg": "^6.0.3", "shellwords": "^0.1.1" }, "peerDependencies": { @@ -40460,7 +40457,6 @@ "dependencies": { "@hashicorp/react-button": "^6.3.1", "@hashicorp/react-image": "^4.1.1", - "@hashicorp/react-inline-svg": "^6.0.3", "@radix-ui/react-popover": "^1.0.5", "@radix-ui/react-visually-hidden": "^1.0.2", "classnames": "^2.3.1" @@ -40859,10 +40855,10 @@ }, "packages/related-content": { "name": "@hashicorp/react-related-content", - "version": "0.3.7", + "version": "0.3.8", "license": "MPL-2.0", "dependencies": { - "@hashicorp/react-card": "^0.14.0", + "@hashicorp/react-card": "^0.15.0", "@hashicorp/react-standalone-link": "^0.4.0", "classnames": "^2.3.1" }, @@ -40992,7 +40988,6 @@ "license": "MPL-2.0", "dependencies": { "@hashicorp/platform-product-meta": "^0.1.0", - "@hashicorp/react-inline-svg": "^6.0.3", "@hashicorp/react-link-wrap": "^3.0.3", "classnames": "^2.3.1" }, @@ -41066,7 +41061,6 @@ "version": "8.0.0", "license": "MPL-2.0", "dependencies": { - "@hashicorp/react-inline-svg": "^6.0.3", "classnames": "^2.3.1" }, "peerDependencies": { diff --git a/packages/accordion/package.json b/packages/accordion/package.json index fe3aecd74..2699e1229 100644 --- a/packages/accordion/package.json +++ b/packages/accordion/package.json @@ -7,7 +7,6 @@ "Zach Shilton" ], "dependencies": { - "@hashicorp/react-inline-svg": "^6.0.3", "classnames": "^2.3.1" }, "license": "MPL-2.0", diff --git a/packages/accordion/partials/AccordionItems/index.js b/packages/accordion/partials/AccordionItems/index.js index a87884d56..1be25e77c 100644 --- a/packages/accordion/partials/AccordionItems/index.js +++ b/packages/accordion/partials/AccordionItems/index.js @@ -4,10 +4,10 @@ */ import React, { useState } from 'react' -import InlineSvg from '@hashicorp/react-inline-svg' -import SvgArrowDown from './icons/arrow-down.svg?include' +import Image from 'next/image' import classnames from 'classnames' import Collapsible from '../Collapsible' +import SvgArrowDown from './icons/arrow-down.svg' import s from './style.module.css' function AccordionItem({ heading, children, isCollapsed, toggleCollapsed }) { @@ -20,7 +20,7 @@ function AccordionItem({ heading, children, isCollapsed, toggleCollapsed }) { > {heading} - + diff --git a/packages/accordion/partials/AccordionItems/style.module.css b/packages/accordion/partials/AccordionItems/style.module.css index 15df658e1..ecf94a0ba 100644 --- a/packages/accordion/partials/AccordionItems/style.module.css +++ b/packages/accordion/partials/AccordionItems/style.module.css @@ -60,7 +60,7 @@ transition: transform 0.4s; transform: var(--icon-transform); - & svg { + & img { display: block; width: 24px; height: 24px; diff --git a/packages/alert-banner/index.tsx b/packages/alert-banner/index.tsx index c6ab2f891..ccf44b4b6 100644 --- a/packages/alert-banner/index.tsx +++ b/packages/alert-banner/index.tsx @@ -11,8 +11,8 @@ import { VisuallyHidden } from '@radix-ui/react-visually-hidden' import useProductMeta, { Products as HashiCorpProduct, } from '@hashicorp/platform-product-meta' -import InlineSvg from '@hashicorp/react-inline-svg' -import CloseIcon from './img/close-icon.svg?include' +import Image from 'next/image' +import CloseIcon from './img/close-icon.svg' import fragment from './fragment.graphql' import s from './style.module.css' import analytics from './analytics' @@ -106,7 +106,7 @@ function AlertBanner({ diff --git a/packages/alert-banner/package.json b/packages/alert-banner/package.json index 0de072f31..809d95368 100644 --- a/packages/alert-banner/package.json +++ b/packages/alert-banner/package.json @@ -11,7 +11,6 @@ ], "dependencies": { "@hashicorp/platform-product-meta": "^0.1.0", - "@hashicorp/react-inline-svg": "^6.0.3", "@radix-ui/react-visually-hidden": "^1.0.2", "js-cookie": "^2.2.1", "slugify": "^1.6.5" diff --git a/packages/code-block/package.json b/packages/code-block/package.json index 696806b35..609b01136 100644 --- a/packages/code-block/package.json +++ b/packages/code-block/package.json @@ -4,7 +4,6 @@ "version": "6.4.0", "author": "HashiCorp", "dependencies": { - "@hashicorp/react-inline-svg": "^6.0.3", "shellwords": "^0.1.1" }, "license": "MPL-2.0", diff --git a/packages/code-block/partials/snippet-bar/index.jsx b/packages/code-block/partials/snippet-bar/index.jsx index 68f807721..4a880f506 100644 --- a/packages/code-block/partials/snippet-bar/index.jsx +++ b/packages/code-block/partials/snippet-bar/index.jsx @@ -5,11 +5,27 @@ import React from 'react' import ClipboardButton from '../clipboard-button' -import InlineSvg from '@hashicorp/react-inline-svg' -import svgFile from './svg/file.svg?include' - import s from './style.module.css' +function FileIcon() { + return ( + + + + ) +} + function SnippetBar({ showChrome, filename, getText, heading, showClipboard }) { if (showClipboard && !getText) { throw new Error( @@ -29,7 +45,7 @@ function SnippetBar({ showChrome, filename, getText, heading, showClipboard }) { ) : null} {filename ? (
- + {filename}
) : null} diff --git a/packages/code-block/partials/snippet-bar/svg/file.svg b/packages/code-block/partials/snippet-bar/svg/file.svg deleted file mode 100644 index 68bd7e2b7..000000000 --- a/packages/code-block/partials/snippet-bar/svg/file.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/packages/logo-grid/package.json b/packages/logo-grid/package.json index b75c48954..d2411f843 100644 --- a/packages/logo-grid/package.json +++ b/packages/logo-grid/package.json @@ -9,7 +9,6 @@ "dependencies": { "@hashicorp/react-button": "^6.3.1", "@hashicorp/react-image": "^4.1.1", - "@hashicorp/react-inline-svg": "^6.0.3", "@radix-ui/react-popover": "^1.0.5", "@radix-ui/react-visually-hidden": "^1.0.2", "classnames": "^2.3.1" diff --git a/packages/logo-grid/partials/popover-tooltip/index.tsx b/packages/logo-grid/partials/popover-tooltip/index.tsx index a3a870d2d..87b2db9ae 100644 --- a/packages/logo-grid/partials/popover-tooltip/index.tsx +++ b/packages/logo-grid/partials/popover-tooltip/index.tsx @@ -5,9 +5,9 @@ import React from 'react' import * as Popover from '@radix-ui/react-popover' -import InlineSvg from '@hashicorp/react-inline-svg' +import Image from 'next/image' import classNames from 'classnames' -import svgX from '../../icons/x.svg?include' +import svgX from '../../icons/x.svg' import s from './style.module.css' interface PopoverTooltipProps { @@ -23,7 +23,7 @@ function PopoverTooltip({ children, theme = 'light' }: PopoverTooltipProps) { {children} - + diff --git a/packages/split-rich-cta-list/index.jsx b/packages/split-rich-cta-list/index.jsx index e7fbf5556..60323c555 100644 --- a/packages/split-rich-cta-list/index.jsx +++ b/packages/split-rich-cta-list/index.jsx @@ -10,6 +10,7 @@ import InlineSvg from '@hashicorp/react-inline-svg' import LinkWrap from '@hashicorp/react-link-wrap' import RightArrow from './img/arrow-right.svg?include' import styles from './styles.module.css' +import Image from 'next/image' export default function SplitRichCTAList({ className, @@ -30,7 +31,7 @@ export default function SplitRichCTAList({
{item.title}

{item.description}

- + ))} diff --git a/packages/split-rich-cta-list/package.json b/packages/split-rich-cta-list/package.json index 3f52ea0c9..bfa180c69 100644 --- a/packages/split-rich-cta-list/package.json +++ b/packages/split-rich-cta-list/package.json @@ -9,7 +9,6 @@ ], "dependencies": { "@hashicorp/platform-product-meta": "^0.1.0", - "@hashicorp/react-inline-svg": "^6.0.3", "@hashicorp/react-link-wrap": "^3.0.3", "classnames": "^2.3.1" }, diff --git a/packages/tabs/package.json b/packages/tabs/package.json index 02ec6b03d..3c7cfeb48 100644 --- a/packages/tabs/package.json +++ b/packages/tabs/package.json @@ -7,7 +7,6 @@ "Zach Shilton" ], "dependencies": { - "@hashicorp/react-inline-svg": "^6.0.3", "classnames": "^2.3.1" }, "peerDependencies": { diff --git a/packages/tabs/partials/tab-triggers/index.tsx b/packages/tabs/partials/tab-triggers/index.tsx index 8bd9349cc..7ed0caafe 100644 --- a/packages/tabs/partials/tab-triggers/index.tsx +++ b/packages/tabs/partials/tab-triggers/index.tsx @@ -5,9 +5,9 @@ import React, { useCallback, useEffect, useRef, useState } from 'react' import classNames from 'classnames' -import InlineSvg from '@hashicorp/react-inline-svg' +import Image from 'next/image' import TabTrigger, { TabTriggerType } from '../tab-trigger' -import SvgChevronRight from '../../icons/chevron-right.svg?include' +import SvgChevronRight from '../../icons/chevron-right.svg' import smoothScroll from '../../utils/smooth-scroll.js' import useWindowSize from '../../hooks/use-window-size' import useScrollLeft from '../../hooks/use-scroll-left' @@ -221,7 +221,7 @@ function NextPrevArrows({ hasOverflow, hiddenArrows, onPrev, onNext }) { })} onClick={onPrev} > - + Previous
- + Next
) diff --git a/packages/tabs/partials/tab-triggers/style.module.css b/packages/tabs/partials/tab-triggers/style.module.css index 3b34b6b46..1c3406bc7 100644 --- a/packages/tabs/partials/tab-triggers/style.module.css +++ b/packages/tabs/partials/tab-triggers/style.module.css @@ -102,7 +102,7 @@ there is overflow. opacity: 0; } - & svg { + & img { display: block; width: 20px; height: 20px; @@ -125,7 +125,7 @@ there is overflow. composes: arrow; left: 0; - & svg { + & img { transform: rotate(180deg); margin-right: 20px; } @@ -135,7 +135,7 @@ there is overflow. composes: arrow; right: 0; - & svg { + & img { margin-left: 20px; } } diff --git a/swingset-extensions/usage-details/partials/icon/index.js b/swingset-extensions/usage-details/partials/icon/index.js index 47924e27a..bf2101a68 100644 --- a/swingset-extensions/usage-details/partials/icon/index.js +++ b/swingset-extensions/usage-details/partials/icon/index.js @@ -4,34 +4,26 @@ */ import React from 'react' -import InlineSvg from '@hashicorp/react-inline-svg' +import Image from 'next/image' +import LoadingSpinner from '../../svg/loading-spinner.svg' +import GithubIcon from '../../svg/github-icon.svg' +import XIcon from '../../svg/x-icon.svg' import s from './style.module.css' function Icon({ icon, isHovered }) { if (icon == 'loading') { - return ( - - ) + return } if (icon == 'github') { return ( - ) } - return ( - - ) + return } export default Icon diff --git a/swingset-extensions/usage-details/partials/sourcegraph-link/index.js b/swingset-extensions/usage-details/partials/sourcegraph-link/index.js index c4f67b9a5..e6c7dbbe8 100644 --- a/swingset-extensions/usage-details/partials/sourcegraph-link/index.js +++ b/swingset-extensions/usage-details/partials/sourcegraph-link/index.js @@ -4,11 +4,13 @@ */ import React from 'react' -import InlineSvg from '@hashicorp/react-inline-svg' +import Image from 'next/image' import qs from '../../utils/query-string' import useHover from '../../hooks/use-hover' import getConfig from 'next/config' import styles from './style.module.css' +import SourcegraphLogo from '../../svg/sourcegraph-logo.svg' +import ExternalLink from '../../svg/external-link.svg' const { publicRuntimeConfig } = getConfig() const { SOURCEGRAPH_URL } = publicRuntimeConfig @@ -24,13 +26,10 @@ function SourcegraphLink({ packageName }) { })}`} > Search with{' '} - - +