Merge pull request #3552 from bettyblocks/feat/add-link-to-box-STAR-523

Feat/add link to box star 523
bettyblocks · Dec 12, 2024 · 2887b9d · 2887b9d
2 parents a1be674 + abd9e01
commit 2887b9d
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 3 deletions.
diff --git a/src/components/box.js b/src/components/box.js
@@ -4,8 +4,8 @@
   allowedTypes: ['BODY_COMPONENT', 'CONTAINER_COMPONENT', 'CONTENT_COMPONENT'],
   orientation: 'HORIZONTAL',
   jsx: (() => {
-    const { env, useText, useLogic, usePublicFile } = B;
-    const { Box } = window.MaterialUI.Core;
+    const { env, useText, useLogic, usePublicFile, Link: BLink } = B;
+    const { Box, Link } = window.MaterialUI.Core;
     const {
       alignment,
       backgroundColor,
@@ -19,6 +19,10 @@
       transparent,
       valignment,
       emptyPlaceHolderText,
+      linkType,
+      linkTo,
+      linkToExternal,
+      linkTarget,
     } = options;
     const isDev = env === 'dev';
     const hasBackgroundColor = backgroundColor !== 'Transparent';
@@ -36,6 +40,11 @@
     const opac = transparent ? 0 : 1;
     const [opacity, setOpacity] = useState(opac);
     const logic = useLogic(displayLogic);
+    const hasLink = linkType === 'internal' && linkTo && linkTo.id !== '';
+    const hasExternalLink =
+      linkType === 'external' && linkToExternal && linkToExternal.id !== '';
+    const linkToExternalText =
+      (linkToExternal && useText(linkToExternal)) || '';
 
     useEffect(() => {
       setBackgroundImage(background);
@@ -97,6 +106,21 @@
       </Box>
     );
 
+    const Component =
+      hasLink || hasExternalLink ? (
+        <Link
+          href={hasExternalLink ? linkToExternalText : undefined}
+          target={linkTarget}
+          rel={linkTarget === '_blank' ? 'noopener' : ''}
+          component={hasLink ? BLink : undefined}
+          endpoint={hasLink ? linkTo : undefined}
+        >
+          {BoxCmp}
+        </Link>
+      ) : (
+        BoxCmp
+      );
+
     useEffect(() => {
       if (isDev) {
         setOpacity(transparent ? 0 : 1);
@@ -110,7 +134,11 @@
     if (!isDev && !logic) {
       return <></>;
     }
-    return isDev ? <div className={classes.wrapper}>{BoxCmp}</div> : BoxCmp;
+    return isDev ? (
+      <div className={classes.wrapper}>{Component}</div>
+    ) : (
+      Component
+    );
   })(),
   styles: (B) => (theme) => {
     const { color: colorFunc, env, mediaMinWidth, Styling } = B;

diff --git a/src/prefabs/structures/Box/options/index.ts b/src/prefabs/structures/Box/options/index.ts
@@ -12,6 +12,7 @@ import {
   displayLogic,
   hideIf,
   showIf,
+  endpoint,
 } from '@betty-blocks/component-sdk';
 import { advanced } from '../../advanced';
 
@@ -55,6 +56,11 @@ export const categories = [
     expanded: false,
     members: ['displayLogic'],
   },
+  {
+    label: 'Link To',
+    expanded: false,
+    members: ['linkType', 'linkTarget', 'linkTo', 'linkToExternal'],
+  },
   {
     label: 'Advanced Options',
     expanded: false,
@@ -309,6 +315,43 @@ export const boxOptions = {
       as: 'UNIT',
     },
   }),
+  linkType: option('CUSTOM', {
+    label: 'Link to',
+    value: 'internal',
+    configuration: {
+      as: 'BUTTONGROUP',
+      dataType: 'string',
+      allowedInput: [
+        { name: 'Internal page', value: 'internal' },
+        { name: 'External page', value: 'external' },
+      ],
+    },
+  }),
+  linkTarget: option('CUSTOM', {
+    value: '_self',
+    label: 'Open in',
+    configuration: {
+      as: 'BUTTONGROUP',
+      dataType: 'string',
+      allowedInput: [
+        { name: 'Current Tab', value: '_self' },
+        { name: 'New Tab', value: '_blank' },
+      ],
+    },
+  }),
+  linkTo: endpoint('Page', {
+    value: '',
+    configuration: {
+      condition: showIf('linkType', 'EQ', 'internal'),
+    },
+  }),
+  linkToExternal: variable('URL', {
+    value: [''],
+    configuration: {
+      placeholder: 'Starts with https:// or http://',
+      condition: showIf('linkType', 'EQ', 'external'),
+    },
+  }),
   emptyPlaceHolderText: variable('Empty placeholder text', {
     value: ['Box'],
   }),