Merge pull request #396 from ericsanner/feature/ee-updates

Enable EE/Pages. Include settings items.
Sitecore · Mar 8, 2024 · ef70907 · ef70907
2 parents e7fc6d0 + cb74bed
commit ef70907
Show file tree

Hide file tree

Showing 30 changed files with 640 additions and 105 deletions.
diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Event.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Event.tsx
@@ -1,14 +1,23 @@
 import React from 'react';
 import { Box, Heading, Text, Image, Link } from '@chakra-ui/react';
-import { Field, ImageField, LinkField } from '@sitecore-jss/sitecore-jss-nextjs';
+import {
+  Field,
+  ImageField,
+  Image as JssImage,
+  LinkField,
+  Link as JssLink,
+  TextField,
+  Text as JssText,
+} from '@sitecore-jss/sitecore-jss-nextjs';
+import { isEditorActive } from '@sitecore-jss/sitecore-jss-nextjs/utils';
 
 // Define the type of props that Event will accept
 export interface Fields {
   /** URL for the event logo */
   Image: ImageField;
 
   /** Name of the event */
-  EventName: Field<string>;
+  EventName: TextField;
 
   /** Date of the event */
   EventDate: Field<string>;
@@ -42,27 +51,44 @@ export const Default = (props: Fields): JSX.Element => {
   return (
     <Box w={{ base: '100%', md: '300px' }} mr={{ base: '0', md: '10' }} mb={75}>
       <Box px={8} py={4} bg="#F2F2F2" borderRadius="lg" position="relative">
-        <Image src={props.Image?.value?.src} maxH={50} />
+        <Image as={JssImage} src={props.Image?.value?.src} maxH={50} field={props.Image} />
         <Heading as="h3" size="lg" mt={2}>
-          {props.EventName?.value}
+          <JssText field={props.EventName} />
         </Heading>
         <Text fontSize="12px" mb={0}>
           {dateString}
         </Text>
+        {isEditorActive() && (
+          <Box>
+            <JssText field={props.EventDate} />
+          </Box>
+        )}
         <Text fontSize="12px" mb={0}>
           {locationString}
         </Text>
-        {props.LinkToSite?.value?.href !== '' && (
+        {isEditorActive() && (
+          <Box>
+            <Box>
+              <JssText field={props.EventCity} />
+            </Box>
+            <Box>
+              <JssText field={props.EventState} />
+            </Box>
+            <Box>
+              <JssText field={props.EventCountry} />
+            </Box>
+          </Box>
+        )}
+        {(isEditorActive() || props.LinkToSite?.value?.href !== '') && (
           <Link
-            href={props.LinkToSite?.value?.href}
+            as={JssLink}
             isExternal={props.LinkToSite?.value?.target == '_blank'}
             fontSize="12px"
             mt={3}
             textDecoration="underline"
             color="#28327D"
-          >
-            {props.LinkToSite?.value?.text}
-          </Link>
+            field={props.LinkToSite}
+          />
         )}
         <Box
           position="absolute"

diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/EventTeaser.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/EventTeaser.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import { Box, Heading, Flex } from '@chakra-ui/react';
-import { Field } from '@sitecore-jss/sitecore-jss-nextjs';
+import { TextField, Text as JssText } from '@sitecore-jss/sitecore-jss-nextjs';
 import { Fields as EventFields, Default as Event } from './Event';
+import { isEditorActive } from '@sitecore-jss/sitecore-jss-nextjs/utils';
 
 // Define the type of props that Event Teaser will accept
 interface Fields {
   /** Headline */
-  Headline: Field<string>;
+  Headline: TextField;
 
   /** Multilist of Events */
   Events: Array<Event>;
@@ -38,9 +39,11 @@ export type EventTeaserProps = {
 export const Default = (props: EventTeaserProps): JSX.Element => {
   return (
     <Box w="80%" mx="auto" mt={20}>
-      <Heading as="h2" size="lg">
-        {props.fields?.Headline?.value}
-      </Heading>
+      {(isEditorActive() || props.fields?.Headline?.value !== '') && (
+        <Heading as="h2" size="lg">
+          <JssText field={props.fields.Headline} />
+        </Heading>
+      )}
       <Flex flexWrap="wrap" mt={10}>
         {props.fields?.Events.map((event, idx) => {
           return <Event key={idx} {...event.fields}></Event>;

diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Link.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Link.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, Link } from '@chakra-ui/react';
-import { LinkField } from '@sitecore-jss/sitecore-jss-nextjs';
+import { LinkField, Link as JssLink } from '@sitecore-jss/sitecore-jss-nextjs';
 
 // Define the type of props that Link will accept
 interface Fields {
@@ -17,11 +17,10 @@ export const Default = (props: LinkProps): JSX.Element => {
   return (
     <Box>
       <Link
-        href={props.fields?.Link?.value?.href}
+        as={JssLink}
+        field={props.fields.Link}
         isExternal={props.fields?.Link?.value?.target == '_blank'}
-      >
-        {props.fields?.Link?.value?.text}
-      </Link>
+      />
     </Box>
   );
 };
diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Person.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Person.tsx
@@ -16,24 +16,32 @@ import {
   ModalFooter,
   useDisclosure,
 } from '@chakra-ui/react';
-import { Field, ImageField, LinkField } from '@sitecore-jss/sitecore-jss-nextjs';
+import {
+  ImageField,
+  Image as JssImage,
+  LinkField,
+  Link as JssLink,
+  TextField,
+  Text as JssText,
+} from '@sitecore-jss/sitecore-jss-nextjs';
+import { isEditorActive } from '@sitecore-jss/sitecore-jss-nextjs/utils';
 
 // Define the type of props that Hero will accept
 export interface PersonFields {
   /** URL for the image */
   Image: ImageField;
 
   /** Person's full name */
-  Name: Field<string>;
+  Name: TextField;
 
   /** Person's job role */
-  JobRole: Field<string>;
+  JobRole: TextField;
 
   /** Person's company */
-  Company: Field<string>;
+  Company: TextField;
 
   /** Person's Biography */
-  Biography: Field<string>;
+  Biography: TextField;
 
   /** Linkedin Link */
   Linkedin: LinkField;
@@ -52,57 +60,65 @@ export const Default = (props: PersonProps): JSX.Element => {
   return (
     <Box mb={30}>
       <Image
+        as={JssImage}
         src={props.fields.Image?.value?.src}
         w={200}
         borderRadius={15}
         mb={10}
         onClick={props.params?.LinkToBio == '1' ? onOpen : undefined}
+        field={props.fields.Image}
       />
 
       {props.params?.LinkToBio == '1' && (
         <Button onClick={onOpen} variant="link">
           <Heading as="h3" size="md" mt={2}>
-            {props.fields.Name?.value}
+            <JssText field={props.fields.Name} />
           </Heading>
         </Button>
       )}
       {!props.params?.LinkToBio && (
         <Heading as="h3" size="md" mt={2}>
-          {props.fields.Name?.value}
+          <JssText field={props.fields.Name} />
         </Heading>
       )}
       <Text fontSize="12px" mb={0}>
-        {props.fields.JobRole?.value}
+        <JssText field={props.fields.JobRole} />
       </Text>
       <Text fontSize="12px" mb={0}>
-        {props.fields.Company?.value}
+        <JssText field={props.fields.Company} />
       </Text>
-      {props.params?.DisplaySocialLinks == '1' && props.fields.Linkedin?.value?.href !== '' && (
+      {(isEditorActive() ||
+        (props.params?.DisplaySocialLinks == '1' && props.fields.Linkedin?.value?.href !== '')) && (
         <Link
-          href={props.fields.Linkedin?.value?.href}
+          as={JssLink}
           isExternal={props.fields.Linkedin?.value?.target == '_blank'}
           fontSize="12px"
           mt={3}
           textDecoration="underline"
           color="#28327D"
-        >
-          Linkedin
-        </Link>
+          field={props.fields.Linkedin}
+        />
       )}
-      {props.params?.DisplaySocialLinks == '1' &&
-        props.fields.Linkedin?.value?.href !== '' &&
-        props.fields.Twitter?.value?.href !== '' && <Box display="inline"> / </Box>}
-      {props.params?.DisplaySocialLinks == '1' && props.fields.Twitter?.value?.href !== '' && (
+      {(isEditorActive() ||
+        (props.params?.DisplaySocialLinks == '1' &&
+          props.fields.Linkedin?.value?.href !== '' &&
+          props.fields.Twitter?.value?.href !== '')) && <Box display="inline"> / </Box>}
+      {(isEditorActive() ||
+        (props.params?.DisplaySocialLinks == '1' && props.fields.Twitter?.value?.href !== '')) && (
         <Link
-          href={props.fields.Twitter?.value?.href}
+          as={JssLink}
           isExternal={props.fields.Twitter?.value?.target == '_blank'}
           fontSize="12px"
           mt={3}
           textDecoration="underline"
           color="#28327D"
-        >
-          Twitter
-        </Link>
+          field={props.fields.Twitter}
+        />
+      )}
+      {isEditorActive() && (
+        <Text fontSize="12px" mb={0}>
+          <JssText field={props.fields.Biography} />
+        </Text>
       )}
       {props.params?.LinkToBio == '1' && (
         <Modal isOpen={isOpen} onClose={onClose} isCentered={true}>

diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/TextImage.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/TextImage.tsx
@@ -1,14 +1,21 @@
 import React from 'react';
 import { Box, Heading, Text, Image, Flex } from '@chakra-ui/react';
-import { Field, ImageField } from '@sitecore-jss/sitecore-jss-nextjs';
+import {
+  TextField,
+  Text as JssText,
+  RichTextField,
+  RichText as JssRichText,
+  ImageField,
+  Image as JssImage,
+} from '@sitecore-jss/sitecore-jss-nextjs';
 
 // Define the type of props that TextImage will accept
 interface Fields {
   /** Title of the TextImage */
-  Headline: Field<string>;
+  Headline: TextField;
 
   /** Richtext of the TextImage */
-  Text: Field<string>;
+  Text: RichTextField;
 
   /** Image of the TextImage */
   Image: ImageField;
@@ -35,24 +42,22 @@ export const Default = (props: TextImageProps): JSX.Element => {
       >
         <Box width="auto" alignSelf="end" maxWidth="620px" minWidth="360px">
           <Heading as="h2" fontSize="30px" fontWeight="bold" mb="33px">
-            {props.fields.Headline?.value}
+            <JssText field={props.fields.Headline} />
           </Heading>
-          {props.fields.Text?.value !== '' && (
-            <Text mb={6} fontSize="18px">
-              {props.fields.Text?.value}
-            </Text>
-          )}
+          <Text as={JssRichText} mb={6} fontSize="18px" field={props.fields.Text} />
         </Box>
       </Flex>
       <Box flex="1" position="relative" minWidth="50%" maxHeight="400px" alignItems="center">
         {' '}
         <Image
+          as={JssImage}
           src={props.fields.Image?.value?.src}
           //alt={props.fields.Image?.value?.alt}
           width="400px"
           height="100%"
           borderRadius={15}
           margin="0 auto"
+          field={props.fields.Image}
         />
       </Box>
     </Flex>

diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/VideoText.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/VideoText.tsx
@@ -1,20 +1,26 @@
 import React from 'react';
 import { Box, Heading, Text, Flex } from '@chakra-ui/react';
-import { Field } from '@sitecore-jss/sitecore-jss-nextjs';
+import {
+  TextField,
+  Text as JssText,
+  RichTextField,
+  RichText as JssRichText,
+} from '@sitecore-jss/sitecore-jss-nextjs';
+import { isEditorActive } from '@sitecore-jss/sitecore-jss-nextjs/utils';
 
 // Define the type of props that VideoText will accept
 interface Fields {
   /** Title of the VideoText */
-  Headline: Field<string>;
+  Headline: TextField;
 
   /** Youtube Video Id (not the full youtube.com url)*/
-  YoutubeVideoId: Field<string>;
+  YoutubeVideoId: TextField;
 
   /** Text headline of the VideoText */
-  TextHeadline: Field<string>;
+  TextHeadline: TextField;
 
   /** Richtext of the VideoText */
-  Text: Field<string>;
+  Text: RichTextField;
 }
 
 export type VideoTextProps = {
@@ -25,12 +31,11 @@ export type VideoTextProps = {
 export const Default = (props: VideoTextProps): JSX.Element => {
   return (
     <Box w={{ base: '100vw', md: '80vw' }} my="20" mx={{ base: '20px', md: 'auto' }}>
-      {props.fields.Headline?.value !== '' && (
+      {(isEditorActive() || props.fields.Headline?.value !== '') && (
         <Heading as="h2" fontSize="30px" fontWeight="bold" mb="33px">
-          {props.fields.Headline?.value}
+          <JssText field={props.fields.Headline} />
         </Heading>
       )}
-
       <Flex direction={{ base: 'column', md: 'row' }} flexGrow={1} columnGap="20" rowGap="10">
         <Box w={{ base: '100%', md: '50%' }} position="relative">
           <iframe
@@ -47,15 +52,17 @@ export const Default = (props: VideoTextProps): JSX.Element => {
           </Box>
         </Box>
         <Box w={{ base: '100%', md: '50%' }}>
-          {props.fields.TextHeadline?.value !== '' && (
+          {(isEditorActive() || props.fields.TextHeadline?.value !== '') && (
             <Heading as="h3" fontWeight="bold" mb={{ base: '10px', md: '20px' }}>
-              {props.fields.TextHeadline?.value}
+              <JssText field={props.fields.TextHeadline} />
             </Heading>
           )}
-          {props.fields.Text?.value !== '' && (
-            <Text mb={6} fontSize="18px">
-              {props.fields.Text?.value}
-            </Text>
+          <Text as={JssRichText} mb={6} fontSize="18px" field={props.fields.Text} />
+          {isEditorActive() && (
+            <Box>
+              {'Youtube Video Id: '}
+              <JssText field={props.fields.YoutubeVideoId} />
+            </Box>
           )}
         </Box>
       </Flex>