Merge pull request #430 from matthewgisonno/bugfix/component-mobile-f…

…ixes Fixing Mobile and Desktop layout for multiple components
Sitecore · Mar 26, 2024 · 593bb6b · 593bb6b
2 parents af2762b + c9cea5e
commit 593bb6b
Show file tree

Hide file tree

Showing 22 changed files with 389 additions and 455 deletions.
diff --git a/src/Project/Sugcon2024/Sugcon/public/favicon.ico b/src/Project/Sugcon2024/Sugcon/public/favicon.ico
diff --git a/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/_component-action-banner.scss b/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/_component-action-banner.scss
diff --git a/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/_component-navigation.scss b/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/_component-navigation.scss
diff --git a/...Project/Sugcon2024/Sugcon/src/assets/sass/components/icon-link-list/_list-horizontal.scss b/...Project/Sugcon2024/Sugcon/src/assets/sass/components/icon-link-list/_list-horizontal.scss
@@ -2,16 +2,16 @@
 @import '@sass/abstracts/mixins';
 
 .icon-link-list.list-horizontal {
-
   a {
     border: none;
 
     svg {
       display: inline-block;
     }
   }
+
   li {
     display: inline-block;
-    margin-left: $middle-margin;
+    // margin-left: $middle-margin;
   }
-}
+}
diff --git a/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/index.scss b/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/index.scss
@@ -1,10 +1,8 @@
 @import 'component-column-splitter';
 @import 'component-container';
 @import 'component-image';
-@import 'component-navigation';
 @import 'component-promo';
 @import '_component-richtext-content';
-@import '_component-action-banner';
 
 @import 'common';
 @import 'container';
@@ -17,4 +15,5 @@
 @import 'link-list';
 @import 'rich-text';
 @import 'people-grid';
-@import 'icon-link-list';
+@import 'icon-link-list';
+
diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/ActionBanner.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/ActionBanner.tsx
@@ -5,6 +5,9 @@ import {
   LinkField,
   Text as JssText,
 } from '@sitecore-jss/sitecore-jss-nextjs';
+import clsx from 'clsx';
+import { Button, Flex, Heading, Text } from '@chakra-ui/react';
+import { LayoutFlex } from 'components/Templates/LayoutFlex';
 
 interface Fields {
   Title: Field<string>;
@@ -18,33 +21,38 @@ type ActionBannerProps = {
 };
 
 const ActionBannerDefaultComponent = (props: ActionBannerProps): JSX.Element => (
-  <div className={`component promo ${props.params.styles}`}>
+  <div className={clsx('component', 'promo', props?.params?.styles)}>
     <div className="component-content">
       <span className="is-empty-hint">Agenda</span>
     </div>
   </div>
 );
 
 export const Default = (props: ActionBannerProps): JSX.Element => {
-  const id = props.params.RenderingIdentifier;
+  const id = props?.params?.RenderingIdentifier || undefined;
 
   if (props?.fields) {
     return (
-      <div className={`component action-banner ${props.params.styles}`} id={id ? id : undefined}>
-        <div className="component-content">
-          <div className="col-1">
-            <h2>
-              <JssText field={props.fields.Title} />
-            </h2>
-          </div>
-          <div className="col-2">
-            <JssText field={props.fields.Text} />
-          </div>
-          <div className="col-1">
-            <JssLink field={props.fields.CallToAction} />
-          </div>
-        </div>
-      </div>
+      <Flex bgColor="sugcon.red.100" color="white" className={clsx(props?.params?.styles)} id={id}>
+        <LayoutFlex
+          justify="space-between"
+          flexDir={{ base: 'column', lg: 'row' }}
+          align={{ base: 'flex-start', lg: 'center' }}
+          gap={{ lg: '75px' }}
+        >
+          <Heading as="h2" size="lg" mb="0">
+            <JssText field={props?.fields?.Title} />
+          </Heading>
+
+          <Text fontSize="lg" mb={{ base: '10px', lg: '0' }}>
+            <JssText field={props?.fields?.Text} />
+          </Text>
+
+          <Button as={JssLink} variant="secondary" field={props?.fields?.CallToAction}>
+            {props?.fields?.CallToAction?.value?.text}
+          </Button>
+        </LayoutFlex>
+      </Flex>
     );
   }
 

diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Event.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Event.tsx
@@ -3,10 +3,10 @@ import { Box, Heading, Text, Image, Link } from '@chakra-ui/react';
 import {
   Field,
   ImageField,
-  Image as JssImage,
   LinkField,
-  Link as JssLink,
   TextField,
+  Image as JssImage,
+  Link as JssLink,
   Text as JssText,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { isEditorActive } from '@sitecore-jss/sitecore-jss-nextjs/utils';
@@ -41,68 +41,62 @@ export const Default = (props: Fields): JSX.Element => {
       ? new Date(props.EventDate?.value).toDateString()
       : '';
 
-  const location: string[] = [];
-  props.EventCity?.value != '' ? location.push(props.EventCity?.value) : '';
-  props.EventState?.value != '' ? location.push(props.EventState?.value) : '';
-  props.EventCountry?.value != '' ? location.push(props.EventCountry?.value) : '';
+  return (
+    <Box
+      w="full"
+      minW={{ base: '100%', md: 'calc(50% - 30px)', lg: 'calc(25% - 30px)' }}
+      px={8}
+      py={4}
+      mb={{ lg: '55px' }}
+      bg="sugcon.gray.200"
+      borderRadius={{ base: 'lg', lg: '8px 8px 0 8px' }}
+      position="relative"
+    >
+      <Image
+        as={JssImage}
+        src={props.Image?.value?.src}
+        maxW="190px"
+        h="auto"
+        field={props?.Image}
+        mb="20px"
+      />
 
-  const locationString = location.join(', ');
+      <Heading as="h3" fontSize="25px" mb="12px">
+        <JssText field={props?.EventName} />
+      </Heading>
 
-  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 as={JssImage} src={props.Image?.value?.src} maxH={50} field={props.Image} />
-        <Heading as="h3" size="lg" mt={2}>
-          <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>
-        {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
-            as={JssLink}
-            isExternal={props.LinkToSite?.value?.target == '_blank'}
-            fontSize="12px"
-            mt={3}
-            textDecoration="underline"
-            color="#28327D"
-            field={props.LinkToSite}
-          />
-        )}
-        <Box
-          position="absolute"
-          bottom="-38px"
-          right="-40px"
-          w={0}
-          h={0}
-          borderStyle="solid"
-          borderWidth="40px"
-          borderColor="transparent transparent #F2F2F2 transparent"
-          transform="rotate(45deg)"
-          display={{ base: 'none', md: 'block' }}
-        />
-      </Box>
+      <Text color="sugcon.gray.500" mb={0}>
+        {isEditorActive() ? <JssText field={props?.EventDate} /> : <>{dateString}</>}
+      </Text>
+
+      <Text color="sugcon.gray.500" mb="12px">
+        <JssText field={props?.EventCity} />, <JssText field={props?.EventState} />{' '}
+        <JssText field={props?.EventCountry} />
+      </Text>
+
+      <Link
+        as={JssLink}
+        size="sm"
+        isExternal={props.LinkToSite?.value?.target == '_blank'}
+        field={props?.LinkToSite}
+      />
+
+      {/* Triangle Corner */}
+      <Box
+        position="absolute"
+        bottom="-38px"
+        right="-40px"
+        w={0}
+        h={0}
+        borderStyle="solid"
+        borderWidth="40px"
+        borderTopColor="transparent"
+        borderRightColor="transparent"
+        borderBottomColor="sugcon.gray.200"
+        borderLeftColor="transparent"
+        transform="rotate(45deg)"
+        display={{ base: 'none', lg: 'block' }}
+      />
     </Box>
   );
 };
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,8 +1,8 @@
 import React from 'react';
-import { Box, Heading, Flex } from '@chakra-ui/react';
+import { Heading, Grid } from '@chakra-ui/react';
 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';
+import { LayoutFlex } from 'components/Templates/LayoutFlex';
 
 // Define the type of props that Event Teaser will accept
 interface Fields {
@@ -38,17 +38,20 @@ export type EventTeaserProps = {
 
 export const Default = (props: EventTeaserProps): JSX.Element => {
   return (
-    <Box w="80%" mx="auto" mt={20}>
-      {(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>;
+    <LayoutFlex direction="column">
+      <Heading as="h2" fontSize="3xl" width="full">
+        <JssText field={props?.fields?.Headline} />
+      </Heading>
+
+      <Grid
+        templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)', lg: 'repeat(4, 1fr)' }}
+        autoRows="minmax(min-content, 1fr)"
+        gap="30px"
+      >
+        {props?.fields?.Events.map((event, idx) => {
+          return <Event key={idx} {...event?.fields}></Event>;
         })}
-      </Flex>
-    </Box>
+      </Grid>
+    </LayoutFlex>
   );
 };