From a2d1d03d302e368e54a668881f69733663da5439 Mon Sep 17 00:00:00 2001 From: "Mr. Singleton" Date: Sun, 10 Dec 2023 07:57:30 -0500 Subject: [PATCH] storybook stories for web consulting template --- .storybook/preview-head.html | 1 + src/common/sanityIo/Types.ts | 28 +- src/components/BlockContentTypes.ts | 83 +- .../animated/AnimatedAboutUsItem.tsx | 23 +- .../animated/AnimatedAboutUsSection.tsx | 19 +- .../animated/AnimatedPortfolioItem.tsx | 3 +- .../animated/AnimatedServiceItem.tsx | 148 +- .../animated/AnimatedServicesSection.tsx | 19 +- src/components/animated/BulletedHeader.tsx | 22 +- .../animated/HeroAnimatedContentSection.tsx | 17 +- src/components/animated/HorizontalAmenity.tsx | 18 +- .../AbstractShapesBackground.tsx | 10 +- src/components/colored-png/ColoredPng.tsx | 8 +- .../CustomizedThemeProvider.tsx | 174 +- .../getThemeFromSanity.ts | 181 ++ .../mackenzies-mind/header/EnhancedHeader.tsx | 42 +- .../resume-bio-section/ResumeBioSection.tsx | 5 +- .../web-dev-site/WebDevHeroContentSection.tsx | 10 +- .../data/AnimatedAboutUsSectionData.ts | 102 + src/stories/data/AnimatedHeroSectionData.ts | 29 + .../data/AnimatedPortfolioSectionData.ts | 87 + .../data/AnimatedServicesSectionData.ts | 86 + src/stories/data/CalculatedHomePageData.ts | 2408 +++++++++++++++++ .../data/ConsultingFooterSectionData.ts | 66 + .../data/ConsultingHeaderSectionData.ts | 73 + src/stories/data/DigitalResumeThemeData.ts | 172 +- src/stories/data/HomePageData.ts | 4 +- src/stories/data/MapSectionData.ts | 41 + src/stories/data/WebConsultingHomePageData.ts | 1050 +++++++ src/stories/data/WebConsultingThemeData.ts | 171 ++ src/stories/data/WebDevThemeData.ts | 136 + src/stories/digital-resume/Button.stories.tsx | 32 +- .../digital-resume/ResumeBio.stories.tsx | 11 +- .../ResumeBusinessCardFab.stories.tsx | 6 +- .../ResumeContactUs.stories.tsx | 7 +- .../ResumeEducation.stories.tsx | 6 +- .../ResumeExperience.stories.tsx | 6 +- .../digital-resume/ResumeFeedback.stories.tsx | 6 +- .../digital-resume/ResumeFooter.stories.tsx | 6 +- .../digital-resume/ResumeHeader.stories.tsx | 6 +- .../ResumePortfolio.stories.tsx | 6 +- .../digital-resume/ResumeSkills.stories.tsx | 6 +- .../SocialMediaBlock.stories.tsx | 6 +- .../AnimatedAboutUs.stories.tsx | 34 + .../AnimatedHeroSection.stories.tsx | 32 + .../AnimatedMapSection.stories.tsx | 38 + .../AnimatedPortfolioSection.stories.tsx | 38 + .../AnimatedServicesSection.stories.tsx | 36 + .../ConsultingFooter.stories.tsx | 38 + .../ConsultingHeader.stories.tsx | 35 + .../WebDevHeroSection.stories.tsx | 9 +- 51 files changed, 5157 insertions(+), 443 deletions(-) create mode 100644 .storybook/preview-head.html create mode 100644 src/components/customized-theme-provider/getThemeFromSanity.ts create mode 100644 src/stories/data/AnimatedAboutUsSectionData.ts create mode 100644 src/stories/data/AnimatedHeroSectionData.ts create mode 100644 src/stories/data/AnimatedPortfolioSectionData.ts create mode 100644 src/stories/data/AnimatedServicesSectionData.ts create mode 100644 src/stories/data/CalculatedHomePageData.ts create mode 100644 src/stories/data/ConsultingFooterSectionData.ts create mode 100644 src/stories/data/ConsultingHeaderSectionData.ts create mode 100644 src/stories/data/MapSectionData.ts create mode 100644 src/stories/data/WebConsultingHomePageData.ts create mode 100644 src/stories/data/WebConsultingThemeData.ts create mode 100644 src/stories/data/WebDevThemeData.ts create mode 100644 src/stories/web-consulting/AnimatedAboutUs.stories.tsx create mode 100644 src/stories/web-consulting/AnimatedHeroSection.stories.tsx create mode 100644 src/stories/web-consulting/AnimatedMapSection.stories.tsx create mode 100644 src/stories/web-consulting/AnimatedPortfolioSection.stories.tsx create mode 100644 src/stories/web-consulting/AnimatedServicesSection.stories.tsx create mode 100644 src/stories/web-consulting/ConsultingFooter.stories.tsx create mode 100644 src/stories/web-consulting/ConsultingHeader.stories.tsx diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html new file mode 100644 index 00000000..29fc9518 --- /dev/null +++ b/.storybook/preview-head.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/common/sanityIo/Types.ts b/src/common/sanityIo/Types.ts index 5a93f1b7..9e1a4679 100644 --- 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 index 98dabdbe..aa01b6b7 100644 --- 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 index f055071b..9eff2288 100644 --- 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 = (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 ( - - { + { animateServiceHover() }} onHoverEnd={async () => { animateServiceNoHover() @@ -79,12 +81,12 @@ const AnimatedAboutUsItem: FunctionComponent = (props: IProps) => { alignContent='center' style={{height: "100%"}}> + src={urlFor(props.service.iconImageSrc ?? "").url() ?? imagePlaceholderClient.placeholderOrImage(props.service.iconImageSrc, 64, 64)}/> = (props: IProps) => { = (props: IProps) => { - ) } diff --git a/src/components/animated/AnimatedAboutUsSection.tsx b/src/components/animated/AnimatedAboutUsSection.tsx index 753b0312..3fde580b 100644 --- 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 = (props) => { } @@ -56,8 +57,8 @@ const AnimatedAboutUsSection: FunctionComponent = (props) => { })} - + spacing={2} > + @@ -100,7 +101,7 @@ const AnimatedAboutUsSection: FunctionComponent = (props) => { variant='body1' gutterBottom>{segment} ))} - + @@ -132,7 +133,7 @@ const AnimatedAboutUsSection: FunctionComponent = (props) => { @@ -141,10 +142,10 @@ const AnimatedAboutUsSection: FunctionComponent = (props) => { } { props.sectionData?.servicesImageSrcArr && - + + src={urlFor(props.sectionData?.servicesImageSrcArr[0] ?? "").url() ?? imagePlaceholderClient.placeholderOrImage(props.sectionData?.servicesImageSrcArr[0], 485, 356)}/> } @@ -153,13 +154,13 @@ const AnimatedAboutUsSection: FunctionComponent = (props) => { + src={urlFor(props.sectionData?.servicesImageSrcArr[1] ?? "").url() ?? imagePlaceholderClient.placeholderOrImage(props.sectionData?.servicesImageSrcArr[1], 230, 265)}/> + src={urlFor(props.sectionData?.servicesImageSrcArr[2] ?? "").url() ?? imagePlaceholderClient.placeholderOrImage(props.sectionData?.servicesImageSrcArr[2], 260, 305)}/> } diff --git a/src/components/animated/AnimatedPortfolioItem.tsx b/src/components/animated/AnimatedPortfolioItem.tsx index ab09941f..732366cc 100644 --- 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 = (props:IProps) => { console.log("not hovering") animateServiceNoHover() }}> + href={props.pageHeader?.ctaButtonLink}>{props.pageHeader?.ctaButtonText} { - props.pageHeader.highlightedDetails.map((detail, index)=> - + props.pageHeader.highlightedDetails?.map((detail, index) => + = (props) => { backgroundColor: "#e3e3e3", borderRadius: "50%" }}> - - + + {/* = (props) => { - {detail.name} + {detail.name} - {detail.description} + {detail.description} @@ -83,7 +88,7 @@ const EnhancedHeader: FunctionComponent = (props) => { {/*enhanced*/} = (props) => { borderRadius: 4, backgroundColor: "black" }}> -
+
: <> diff --git a/src/components/templates/my-digital-resume/resume-bio-section/ResumeBioSection.tsx b/src/components/templates/my-digital-resume/resume-bio-section/ResumeBioSection.tsx index c5b626ac..96aa1a53 100644 --- a/src/components/templates/my-digital-resume/resume-bio-section/ResumeBioSection.tsx +++ b/src/components/templates/my-digital-resume/resume-bio-section/ResumeBioSection.tsx @@ -1,4 +1,4 @@ -import React, {FunctionComponent} from 'react' +import React, {FunctionComponent, useContext} from 'react' import {Button, ButtonGroup, Grid, Typography, useMediaQuery, useTheme,} from '@mui/material'; import {ResumeBioSectionType} from "../../../BlockContentTypes"; import {urlFor} from "../../../block-content-ui/static-pages/cmsStaticPagesClient"; @@ -6,6 +6,8 @@ import {SanityTransformHwHomePage} from "../../../../common/sanityIo/Types"; import useThwCommonStyles from "../../../../common/sanityIo/ThwCommonStyles"; import SocialMediaBlock from "../social-media-block/SocialMediaBlock"; import BusinessCardSubmitEmail from "../../transform-hw/pages/BusinessCardSubmitEmail"; +import CustomizedThemeProvider from "../../../customized-theme-provider/CustomizedThemeProvider"; +import CustomizedThemeContext from "../../../customized-theme-provider/CustomizedThemeContext"; interface IProps { @@ -20,6 +22,7 @@ const ResumeBioSection: FunctionComponent = (props: IProps) => { const smDown = useMediaQuery(theme.breakpoints.down('sm')) + const customizedthemeContext = useContext(CustomizedThemeContext) return ( diff --git a/src/components/templates/web-dev-site/WebDevHeroContentSection.tsx b/src/components/templates/web-dev-site/WebDevHeroContentSection.tsx index 4b8a94eb..021953c6 100644 --- a/src/components/templates/web-dev-site/WebDevHeroContentSection.tsx +++ b/src/components/templates/web-dev-site/WebDevHeroContentSection.tsx @@ -8,7 +8,7 @@ import PageContext from "../../page-context/PageContext"; import WebDevSiteTheme from "../../../theme/WebDevSiteTheme"; import makeStyles from "@mui/styles/makeStyles"; import {Theme, ThemeProvider} from "@mui/material/styles"; -import {Button, Grid, Typography} from "@mui/material"; +import {Button, Grid, Typography, useTheme} from "@mui/material"; // import FontFaces from "../../theme/common/FontFaces"; interface IProps { @@ -44,7 +44,7 @@ const WebDevHeroContentSection: FunctionComponent = (props) => { } const pageContext = useContext(PageContext) - +const theme= useTheme() const classes = useStyles(classParameters) const globalClasses = useCustomStyles({}) return ( @@ -58,13 +58,13 @@ const WebDevHeroContentSection: FunctionComponent = (props) => { {props.sectionData.contentTitle} + color={'textPrimary'}>{props.sectionData.contentTitle} {props.sectionData.contentText} + >{props.sectionData.contentText}