From 733fe862d451b4ab2a816796c267c303e93a075f Mon Sep 17 00:00:00 2001 From: Adam Raya Date: Mon, 24 Apr 2023 15:20:13 -0700 Subject: [PATCH] Fix Page Designer ImageWithText Link component (#1092) (#1148) * Fix PD ImageWithText Link component by using Chakra UI Link * Use isAbsoluteURL to use react-router Link or Chakra Link component * PR Feedback * Clean up * Update packages/template-retail-react-app/app/page-designer/assets/image-with-text/index.jsx * Remove temporal page-viewer page to facilitate review --------- Co-authored-by: Ben Chypak --- .../page-designer/assets/image-with-text/index.jsx | 10 +++++++--- .../app/page-designer/utils.js | 14 ++++++++++++++ 2 files changed, 21 insertions(+), 3 deletions(-) create mode 100644 packages/template-retail-react-app/app/page-designer/utils.js diff --git a/packages/template-retail-react-app/app/page-designer/assets/image-with-text/index.jsx b/packages/template-retail-react-app/app/page-designer/assets/image-with-text/index.jsx index 73e7aa7cd8..62d79ef686 100644 --- a/packages/template-retail-react-app/app/page-designer/assets/image-with-text/index.jsx +++ b/packages/template-retail-react-app/app/page-designer/assets/image-with-text/index.jsx @@ -6,8 +6,9 @@ */ import React from 'react' import PropTypes from 'prop-types' -import {Box, Image, Text} from '@chakra-ui/react' +import {Box, Image, Link as ChakraLink, Text} from '@chakra-ui/react' import Link from '../../../components/link' +import {isAbsoluteURL} from '../../utils' /** * Image with text component @@ -22,6 +23,9 @@ import Link from '../../../components/link' */ export const ImageWithText = ({ITCLink, ITCText, image, heading, alt}) => { const hasCaption = ITCText || heading + const isAbsolute = isAbsoluteURL(ITCLink) + const LinkWrapper = isAbsolute ? ChakraLink : Link + const linkProps = isAbsolute ? {href: ITCLink} : {to: ITCLink} return ( @@ -35,7 +39,7 @@ export const ImageWithText = ({ITCLink, ITCText, image, heading, alt}) => { - + { title={alt} filter={'brightness(40%)'} /> - + {hasCaption && ( diff --git a/packages/template-retail-react-app/app/page-designer/utils.js b/packages/template-retail-react-app/app/page-designer/utils.js new file mode 100644 index 0000000000..27a91d9486 --- /dev/null +++ b/packages/template-retail-react-app/app/page-designer/utils.js @@ -0,0 +1,14 @@ +/* + * Copyright (c) 2023, Salesforce, Inc. + * All rights reserved. + * SPDX-License-Identifier: BSD-3-Clause + * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause + */ + +/** + * Determines whether the specified URL is absolute + * + * @param {string} url The URL to test + * @returns {boolean} True if the specified URL is absolute, otherwise false + */ +export const isAbsoluteURL = (url) => /^([a-z][a-z\d+\-.]*:)?\/\//i.test(url)