Merge pull request #10 from theHandsomestNerd/update-storybook-compon…

…ents storybook stories for web consulting template
chowworks · Dec 10, 2023 · 699d9e7 · 699d9e7
2 parents 7d3f236 + a2d1d03
commit 699d9e7
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",