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 lost components #365

Merged
merged 13 commits into from
Feb 22, 2024
Merged
Changes from 1 commit
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
Prev Previous commit
Next Next commit
create buttonLink component, add sitecore utils, and apply both to he…
…ro component
eatallant authored and lovesitecore committed Feb 20, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit dc2c739799fd0e62f856b19e43a06e7aad52033c
22 changes: 22 additions & 0 deletions src/Project/Sugcon2024/Sugcon/src/basics/ButtonLink.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from 'react';
import { LinkField } from '@sitecore-jss/sitecore-jss-nextjs';
import { Button, Link } from '@chakra-ui/react';

type ButtonLinkProps = {
// Sitecore link field
field: LinkField;

// button variation
variant?: string;
};

export const ButtonLink = (props: ButtonLinkProps): JSX.Element => {
const { href, target = '', anchor } = props.field.value;
const { variant = 'primary' } = props;

return (
<Link href={href} isExternal={target == '_blank'}>
<Button variant={variant}>{anchor}</Button>
</Link>
);
};
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
import React from 'react';
import {
Box,
Heading,
Text,
Button,
Image,
Flex,
Link,
useBreakpointValue,
} from '@chakra-ui/react';
import { Box, Heading, Text, Image, Flex, useBreakpointValue } from '@chakra-ui/react';
import { Field, ImageField, LinkField } from '@sitecore-jss/sitecore-jss-nextjs';
import { ButtonLink } from '../../basics/ButtonLink';
import {
isSitecoreLinkFieldPopulated,
isSitecoreTextFieldPopulated,
} from 'lib/utils/sitecoreUtils';

// Define the type of props that Hero will accept
interface Fields {
@@ -55,24 +51,19 @@ export const HeroHomepage = (props: HeroProps): JSX.Element => {
<Heading as="h2" fontSize="30px" fontWeight="bold" mb="33px">
{props.fields.Headline?.value}
</Heading>
{props.fields.EventDate?.value !== '' && (
{isSitecoreTextFieldPopulated(props.fields.EventDate) && (
<Text fontSize="18px" mb={6}>
{props.fields.EventDate?.value}
</Text>
)}
{props.fields.Text?.value !== '' && (
{isSitecoreTextFieldPopulated(props.fields.Text) && (
<Text mb={6} fontSize="18px">
{props.fields.Text?.value}
</Text>
)}
{props.fields.CallToAction?.value?.href !== '' && (
{isSitecoreLinkFieldPopulated(props.fields.CallToAction) && (
<Box width="auto" alignSelf="start">
<Link
href={props.fields.CallToAction?.value?.href}
isExternal={props.fields.CallToAction?.value?.target == '_blank'}
>
<Button variant="primary">{props.fields.CallToAction?.value?.anchor}</Button>
</Link>
<ButtonLink field={props.fields.CallToAction} />
</Box>
)}
</Box>
@@ -113,7 +104,7 @@ export const HeroEvent = (props: HeroProps): JSX.Element => {
<Heading as="h2" fontSize="30px" fontWeight="bold" mb="33px">
{props.fields.Headline?.value}
</Heading>
{props.fields.Text?.value !== '' && (
{isSitecoreTextFieldPopulated(props.fields.Text) && (
<Text mb={6} fontSize="18px">
{props.fields.Text?.value}
</Text>
@@ -164,19 +155,14 @@ export const HeroJustificationLetter = (props: HeroProps): JSX.Element => {
<Heading as="h2" fontSize="30px" color="black" fontWeight="bold" mt={10} mb="33px">
{props.fields.Headline?.value}
</Heading>
{props.fields.Text?.value && (
{isSitecoreTextFieldPopulated(props.fields.Text) && (
<Text mb={6} fontSize="18px" color="black">
{props.fields.Text?.value}
</Text>
)}
{props.fields.CallToAction?.value?.href !== '' && (
{isSitecoreLinkFieldPopulated(props.fields.CallToAction) && (
<Box width="auto" alignSelf="start">
<Link
href={props.fields.CallToAction?.value?.href}
isExternal={props.fields.CallToAction?.value?.target == '_blank'}
>
<Button variant="secondary">{props.fields.CallToAction?.value?.anchor}</Button>
</Link>
<ButtonLink field={props.fields.CallToAction} variant="secondary" />
</Box>
)}
</Box>
29 changes: 29 additions & 0 deletions src/Project/Sugcon2024/Sugcon/src/lib/utils/sitecoreUtils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
interface SitecoreLinkField {
value?: {
href?: string;
text?: string;
anchor?: string;
};
}

interface SitecoreTextField {
value?: string;
}

interface SitecoreImageField {
value?: {
src?: string;
};
}

export function isSitecoreLinkFieldPopulated(field?: SitecoreLinkField): boolean {
return Boolean(field?.value?.href && (field?.value?.text || field?.value?.anchor));
}

export function isSitecoreTextFieldPopulated(field: SitecoreTextField): boolean {
return Boolean(field?.value);
}

export function isSitecoreImageFieldPopulated(field: SitecoreImageField): boolean {
return Boolean(field?.value?.src);
}