storybook stories for web consulting template

chowworks · Dec 10, 2023 · a2d1d03 · a2d1d03
1 parent 7d3f236
commit a2d1d03
Show file tree

Hide file tree

Showing 51 changed files with 5,157 additions and 443 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1 @@
+<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@700&family=Inter:wght@400;500;700&family=Orbitron:wght@400;500&family=Oswald:wght@400;500&family=Raleway:wght@400;500&display=swap" rel="stylesheet"/>
diff --git a/src/common/sanityIo/Types.ts b/src/common/sanityIo/Types.ts
@@ -32,6 +32,8 @@ export type SanityGroupSchedule = {
 }
 
 export type SanityBusinessContact = {
+    "_type"?: "BusinessContact"
+    title?:string
     email?: string
     address?: string
     phone?: string
@@ -91,6 +93,7 @@ export type SanityUnderConstructionPageType = {
 }
 
 export type SanityMuiTheme = {
+    _type?: "MuiTheme"
     title?: string
     slug?: SanitySlug
     appBarHeight?: number
@@ -109,27 +112,30 @@ export type SanityMuiBreakpoints = {
 
 
 export type SanityMuiFontFace = {
-    name: string
-    fontSize: string
-    fontStyle: string
-    fontWeight: string
-    lineHeight: string
-    letterSpacing: string
+    name?: string
+    fontSize?: string
+    fontStyle?: string
+    fontWeight?: string
+    lineHeight?: string
+    letterSpacing?: string
     textTransform?: any
     [key:string]: any
-    mediaQueries: SanityMuiMediaQuery[]
+    mediaQueries?: SanityMuiMediaQuery[]
 }
 
 export type SanityMuiMediaQuery = {
-    breakpoint: string
+    "_type"?: "MuiMediaQuery"
+    breakpoint: string[]
     typography: SanityMuiFontFace
 }
 export type SanityMuiTypography = {
+    "_type"?: "MuiTypography",
     fontFamily: string[]
     fontFaces?: SanityMuiFontFace[]
 }
 
 export type SanityMuiColorPalette = {
+    "_type"?: "MuiColorPalette",
     defaultBackground: string
     defaultPaperBackgroundColor: string
     primaryColor: string
@@ -211,7 +217,7 @@ export type SanityModalType = {
 }
 
 export type SanityMenuItem = {
-    _type: string
+    _type:string,
     title?: string,
     displayText?: string,
     url?: string,
@@ -222,7 +228,7 @@ export type SanityMenuItem = {
 }
 
 export type SanityMenuGroup = {
-    _type: string
+    _type?:string,
     title?: string,
     slug?: SanitySlug,
     menuGroupTitle?: string,
@@ -235,7 +241,7 @@ export type SanityMenuContainer = {
     title?: string,
     slug?: SanitySlug,
     displayText?: string,
-    subMenus?: SanityMenuGroup & SanityMenuItem[]
+    subMenus?: (SanityMenuGroup & SanityMenuItem)[]
     logoImageAltText?: string
     logoText?: string
     logoAccentText?: string

diff --git a/src/components/BlockContentTypes.ts b/src/components/BlockContentTypes.ts
@@ -17,20 +17,19 @@ export type HeroContentSectionType = {
 export type HeroAnimatedContentSectionType = {
     name: string
     title: string
-    theme: SanityMuiTheme
     contentSlides: SanityHeroContentSlide[]
 }
 
 export type SanityHeroContentSlide = {
-    heroImage: SanityImageAsset
-    heroBullet: SanityImageAsset
-    heroImageAltText: string
-    heroImageBackground: SanityImageAsset
-    contentTitle: string
-    contentWelcomeMessage: string
-    contentText: string
-    ctaButtonTitle: string
-    ctaButtonLink: string
+    heroImage?: SanityImageAsset
+    heroBullet?: SanityImageAsset
+    heroImageAltText?: string
+    heroImageBackground?: SanityImageAsset
+    contentTitle?: string
+    contentWelcomeMessage?: string
+    contentText?: string
+    ctaButtonTitle?: string
+    ctaButtonLink?: string
 }
 
 
@@ -192,25 +191,25 @@ export type ThwServiceItemNoRefType = {
 } & SanityDocumentFields
 
 export type AnimatedServiceItemNoRefType = {
-    name: string
+    name?: string
     imageSrc?: SanityImageAsset
     iconImageSrc?: SanityImageAsset
     backgroundImageSrc?: SanityImageAsset
-    imageSrcAltText: string
-    contentTitle: string
-    contentText: string
-    ctaButtonText: string
-    ctaButtonLink: string
-    learnMoreLink: string
-    learnMoreText: string
-    educationPageTitle: string
-    educationPageSlimHeroImage: SanityImageAsset
-    extendedDescriptions: string[]
-    benefitsOfServiceTitle: string
-    benefitsOfServiceContents: string[]
-    benefitsOfServiceBullets: string[]
-    serviceAmenities: ServiceAmenityType[]
-    slug: SanitySlug
+    imageSrcAltText?: string
+    contentTitle?: string
+    contentText?: string
+    ctaButtonText?: string
+    ctaButtonLink?: string
+    learnMoreLink?: string
+    learnMoreText?: string
+    educationPageTitle?: string
+    educationPageSlimHeroImage?: SanityImageAsset
+    extendedDescriptions?: string[]
+    benefitsOfServiceTitle?: string
+    benefitsOfServiceContents?: string[]
+    benefitsOfServiceBullets?: string[]
+    serviceAmenities?: ServiceAmenityType[] | undefined
+    slug?: SanitySlug
 } & SanityDocumentFields
 
 export type AnimatedAboutUsSectionType = {
@@ -221,13 +220,13 @@ export type AnimatedAboutUsSectionType = {
     contentPreTitle: string
     contentText: string
     contentTexts: string[]
-    servicesList: AnimatedServiceItemNoRefType[]
+    servicesList: AnimatedServiceItemNoRefType[] | undefined
     highlightedAmenities?: ServiceAmenityType[]
     highlightedAmenitiesTitle?: string
     highlightedAmenitiesTexts?: string[]
     highlightedAmenitiesBullets?: string[]
-    servicesImageSrcArr: SanityImageAsset[]
-    servicesMasonryAccentImageSrc: SanityImageAsset
+    servicesImageSrcArr: (SanityImageAsset| undefined)[]
+    servicesMasonryAccentImageSrc?: SanityImageAsset
 }
 
 export type AnimatedServicesSectionType = {
@@ -241,9 +240,9 @@ export type AnimatedServicesSectionType = {
     contentSummaryTexts: string[]
     ctaButtonText: string
     ctaButtonLink: string
-    videoPreviewImageSrc:SanityImageAsset
-    videoPreviewSectionBackgroundImageSrc: SanityImageAsset
-    videoUrl:string
+    videoPreviewImageSrc?:SanityImageAsset
+    videoPreviewSectionBackgroundImageSrc?: SanityImageAsset
+    videoUrl?:string
     videoPreviewText:string
 }
 
@@ -601,21 +600,23 @@ export type DevelopmentHeaderSectionType = {
     headerMenuRef: SanityMenuContainer
 }
 export type HeaderSectionType = {
-    name: string
-    isSearch: boolean
-    isEnhanced: boolean
-    backgroundColor: string
-    ctaButtonText: string
-    ctaButtonLink: string
-    logoImgSrc: SanityImageAsset
-    highlightedDetails: ServiceAmenityType[]
-    headerMenuRef: SanityMenuContainer
+    title?: string
+    name?: string
+    isSearch?: boolean
+    isEnhanced?: boolean
+    backgroundColor?: string
+    ctaButtonText?: string
+    ctaButtonLink?: string
+    logoImgSrc?: SanityImageAsset
+    highlightedDetails?: ServiceAmenityType[]
+    headerMenuRef?: SanityMenuContainer
 }
 export type DevelopmentFooterSectionType = {
     name: string
     footerMenuRef: SanityMenuContainer
 }
 export type FooterSectionType = {
+    _type:string
     name: string
     backgroundImgSrc?: SanityImageAsset
     backgroundColor?: string

diff --git a/src/components/animated/AnimatedAboutUsItem.tsx b/src/components/animated/AnimatedAboutUsItem.tsx
@@ -1,11 +1,12 @@
 import React, {FunctionComponent, useContext} from 'react'
-import {Card, Grid, ThemeProvider, Typography, useMediaQuery} from '@mui/material'
+import {Card, Grid, ThemeProvider, Typography, useMediaQuery, useTheme} from '@mui/material'
 import {v4 as uuidv4} from 'uuid'
 import {AnimatedServiceItemNoRefType} from "../BlockContentTypes";
 import ImageWIthButtonOverlay from "../image-with-button-overlay/ImageWithButtonOverlay";
 import CustomizedThemeContext from "../customized-theme-provider/CustomizedThemeContext";
 import {urlFor} from "../block-content-ui/static-pages/cmsStaticPagesClient";
 import {motion, useAnimationControls} from "framer-motion";
+import imagePlaceholderClient from "../../utils/imagePlaceholderClient";
 
 
 interface IProps {
@@ -18,28 +19,29 @@ interface IProps {
 
 
 const AnimatedAboutUsItem: FunctionComponent<IProps> = (props: IProps) => {
-    const customizedTheme = useContext(CustomizedThemeContext)
+    // const customizedTheme = useContext(CustomizedThemeContext)
     const controls = useAnimationControls()
     const textColorControls = useAnimationControls()
     const overlayControl = useAnimationControls()
 
+    const theme = useTheme()
+
     const animateServiceHover = async () => {
         overlayControl.start({opacity: 1}, {duration: .5})
         controls.start({scale: 1}, {duration: .5})
-        textColorControls.start({color: customizedTheme.customizedTheme.palette.primary.main})
+        textColorControls.start({color: theme.palette.primary.main})
     }
 
     const animateServiceNoHover = async () => {
         controls.start({scale: 1.1}, {duration: .25})
         overlayControl.start({opacity: 0}, {duration: .5})
-        textColorControls.start({color: customizedTheme.customizedTheme.palette.text.primary})
+        textColorControls.start({color: theme.palette.text.primary})
     }
 
-    const smDown = useMediaQuery(customizedTheme.customizedTheme.breakpoints.down('sm'))
+    const smDown = useMediaQuery(theme.breakpoints.down('sm'))
 
     return (
-        <ThemeProvider theme={customizedTheme.customizedTheme} key={uuidv4()}>
-            <motion.div onHoverStart={async () => {
+            <motion.div key={uuidv4()} onHoverStart={async () => {
                 animateServiceHover()
             }} onHoverEnd={async () => {
                 animateServiceNoHover()
@@ -79,12 +81,12 @@ const AnimatedAboutUsItem: FunctionComponent<IProps> = (props: IProps) => {
                                       alignContent='center' style={{height: "100%"}}>
                                     <motion.div animate={controls} initial={{scale: 1.1}}>
                                         <img style={{zIndex: 2}} width={64} height={64}
-                                             src={urlFor(props.service.iconImageSrc ?? "").url() ?? ""}/>
+                                             src={urlFor(props.service.iconImageSrc ?? "").url() ?? imagePlaceholderClient.placeholderOrImage(props.service.iconImageSrc, 64, 64)}/>
                                     </motion.div>
                                 </Grid>
                             </Card>
                             <Grid item container style={{
-                                backgroundColor: customizedTheme.customizedTheme.palette.primary.main,
+                                backgroundColor: theme.palette.primary.main,
                                 height: "8px",
                                 zIndex: 2,
                                 position: "absolute"
@@ -93,7 +95,7 @@ const AnimatedAboutUsItem: FunctionComponent<IProps> = (props: IProps) => {
                         </Grid>
                     </Grid>
                     <Grid item style={{
-                        padding: customizedTheme.customizedTheme.spacing(4, 4, 4, 4),
+                        padding: theme.spacing(4, 4, 4, 4),
                         backgroundSize: "contain",
                         backgroundRepeat: "no-repeat",
                         backgroundPosition: "right",
@@ -112,7 +114,6 @@ const AnimatedAboutUsItem: FunctionComponent<IProps> = (props: IProps) => {
                     </Grid>
                 </Grid>
             </motion.div>
-        </ThemeProvider>
     )
 }
 

diff --git a/src/components/animated/AnimatedAboutUsSection.tsx b/src/components/animated/AnimatedAboutUsSection.tsx
@@ -9,6 +9,7 @@ import {Circle} from "@mui/icons-material";
 import {motion} from "framer-motion"
 import BulletedHeader from "./BulletedHeader";
 import HorizontalAmenity from "./HorizontalAmenity";
+import imagePlaceholderClient from "../../utils/imagePlaceholderClient";
 
 export const useStyles = makeStyles((theme: Theme) => ({
     root: {
@@ -47,7 +48,7 @@ const AnimatedAboutUsSection: FunctionComponent<IProps> = (props) => {
                     <img
                         width={256}
                         height={256}
-                        src={urlFor(props.sectionData?.servicesMasonryAccentImageSrc ?? "").width(64).height(64).url() ?? ""}
+                        src={urlFor(props.sectionData?.servicesMasonryAccentImageSrc ?? "").width(256).height(256).url() ?? imagePlaceholderClient.placeholderOrImage(props.sectionData?.servicesMasonryAccentImageSrc, 256, 256)}
                     />
                 </motion.div>}
                 <Grid item container justifyContent='center' spacing={2} px={4}>
@@ -56,8 +57,8 @@ const AnimatedAboutUsSection: FunctionComponent<IProps> = (props) => {
                     })}
                 </Grid>
                 <Grid item container style={{padding: theme.spacing(8, 6)}}
-                      spacing={2} justifyContent='center'>
-                    <Grid item xs={12} sm={11}>
+                      spacing={2} >
+                    <Grid item container xs={12} sm={12} md={6}><Grid item  container xs={12}>
                         <Grid item container>
                             <BulletedHeader textContent={props.sectionData?.contentPreTitle} heroBullet={props.sectionData?.heroBullet} />
                         </Grid>
@@ -100,7 +101,7 @@ const AnimatedAboutUsSection: FunctionComponent<IProps> = (props) => {
                                     variant='body1' gutterBottom>{segment}</Typography></Grid>
                                 </Grid>))}
                         </Grid>
-                    </Grid>
+                    </Grid></Grid>
 
                     <Grid item xs={12} md={6} spacing={2} container justifyContent='center'>
 
@@ -132,7 +133,7 @@ const AnimatedAboutUsSection: FunctionComponent<IProps> = (props) => {
                                             <img
                                                 width={64}
                                                 height={64}
-                                                src={urlFor(props.sectionData?.servicesMasonryAccentImageSrc ?? "").width(64).height(64).url() ?? ""}
+                                                src={urlFor(props.sectionData?.servicesMasonryAccentImageSrc ?? "").width(64).height(64).url() ?? imagePlaceholderClient.placeholderOrImage(props.sectionData?.servicesMasonryAccentImageSrc, 64, 64)}
                                             />
                                         </motion.div>
                                     </Grid>
@@ -141,10 +142,10 @@ const AnimatedAboutUsSection: FunctionComponent<IProps> = (props) => {
                             }
                             {
                                 props.sectionData?.servicesImageSrcArr &&
-                                <Grid item container justifyContent='center'>
+                                <Grid item container justifyContent='center' alignContent='flex-end' alignItems='flex-end'>
                                     <Grid item>
                                         <img
-                                        src={urlFor(props.sectionData?.servicesImageSrcArr[0] ?? "").url() ?? ""}/>
+                                        src={urlFor(props.sectionData?.servicesImageSrcArr[0] ?? "").url() ?? imagePlaceholderClient.placeholderOrImage(props.sectionData?.servicesImageSrcArr[0], 485, 356)}/>
                                     </Grid>
                                 </Grid>
                             }
@@ -153,13 +154,13 @@ const AnimatedAboutUsSection: FunctionComponent<IProps> = (props) => {
                                 <Grid item container justifyContent='center' spacing={2}>
                                     <Grid item xs={6} container justifyContent='flex-end'>
                                         <Grid item><img
-                                            src={urlFor(props.sectionData?.servicesImageSrcArr[1] ?? "").url() ?? ""}/></Grid>
+                                            src={urlFor(props.sectionData?.servicesImageSrcArr[1] ?? "").url() ?? imagePlaceholderClient.placeholderOrImage(props.sectionData?.servicesImageSrcArr[1], 230, 265)}/></Grid>
                                     </Grid>
                                     <Grid item xs={6}>
                                         <Grid item>
                                             <img
                                                 style={{maxWidth: "100%"}}
-                                            src={urlFor(props.sectionData?.servicesImageSrcArr[2] ?? "").url() ?? ""}/></Grid>
+                                            src={urlFor(props.sectionData?.servicesImageSrcArr[2] ?? "").url() ?? imagePlaceholderClient.placeholderOrImage(props.sectionData?.servicesImageSrcArr[2], 260, 305)}/></Grid>
                                     </Grid>
                                 </Grid>
                             }

diff --git a/src/components/animated/AnimatedPortfolioItem.tsx b/src/components/animated/AnimatedPortfolioItem.tsx
@@ -6,6 +6,7 @@ import makeStyles from "@mui/styles/makeStyles";
 import {Theme} from "@mui/material/styles";
 import {AnimatedPortfolioItemType} from "../BlockContentTypes";
 import {motion, useAnimationControls} from 'framer-motion';
+import imagePlaceholderClient from "../../utils/imagePlaceholderClient";
 
 export const useStyles = makeStyles((theme: Theme) => ({
     root: {
@@ -42,7 +43,7 @@ const AnimatedPortfolioItem: FunctionComponent<IProps> = (props:IProps) => {
             console.log("not hovering")
             animateServiceNoHover()
         }}><Button style={{
-            backgroundImage: `url(${urlFor(props.portfolioItem?.coverImage ?? "").url() ?? ""})`,
+            backgroundImage: `url(${urlFor(props.portfolioItem?.coverImage ?? "").url() ?? imagePlaceholderClient.placeholderOrImage(props.portfolioItem?.coverImage,300, 250)})`,
             backgroundSize: "cover",
             backgroundPosition: "top center",
             backgroundRepeat: "no-repeat",