Storybook pull request (#16)

* added some colors and elaine sans

Fix for logo

* storybook stories for web consulting template

.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"/>

functions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "functions",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "scripts": {
     "lint": "eslint --ext .js,.ts .",
     "build": "tsc",

functions/src/groqQueries.ts

@@ -103,6 +103,7 @@ const HOMEPAGE = `_type,
               }
           },
           headerContent {
+          ...,
             "content": content[]->{
                 ...,
                 headerMenuRef->{

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chowworks-website",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "license": "GPL-3.0-or-later",
   "private": true,
   "dependencies": {

sanityIo/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "chow-works-sanity",
+  "name": "the-handsomest-nerd-sanity",
   "private": true,
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Sanity CMS for React Website Builder",
   "main": "package.json",
   "author": "theHandsomestNerd <hello@thehandsomestnerd.com>",

sanityIo/schemas/mui/ColorListing.js

@@ -19,5 +19,8 @@ export const ColorListing = [
     {value: "ALMOSTWHITE", title: "Almost White"},
     {value: "DARKERGRAY", title: "Darker Gray"},
     {value: "DARK_GRAY", title: "Dark Gray"},
-    {value: "LIGHTER_GRAY", title: "Lighter Gray"},
+    {value: "ALMOST_BLACK", title: "Almost Black"},
+    {value: "PURPLE", title: "Purple"},
+    {value: "LIGHT_WHITE", title: "Light White"},
+    {value: "DISABLED_GRAY", title: "Disabled Gray"},
 ]

sanityIo/schemas/mui/MuiTypography.js

@@ -14,7 +14,8 @@ export default {
                         {value: "Prompt", title: "Prompt"},
                         {value: "Raleway", title: "Raleway"},
                         {value: "Poppins", title: "Poppins"},
-                        {value: "Monteserrat", title: "Monteserrat"}
+                        {value: "Monteserrat", title: "Monteserrat"},
+                        {value: "Elaine Sans", title: "Elaine Sans"}
                     ]
                 }}],
 

sanityIo/schemas/portfolio/PortfolioSection.js

@@ -30,7 +30,7 @@ export default {
             of: [
                 {type: "reference",
                     to:
-                        [{type: "portfolioItem"}],
+                        [{type: "PortfolioItem"}],
                 }
             ]
         },

sanityIo/schemas/schema.js

@@ -92,6 +92,7 @@ import AnimatedPortfolioItem from "./sections/animated/AnimatedPortfolioItem";
 import AnimatedPortfolioSection from "./sections/animated/AnimatedPortfolioSection";
 import HeadlineCTASection from "./HeadlineCTASection";
 import MapSection from "./sections/MapSection";
+import PortfolioItem from "./portfolio/PortfolioItem";
 
 // Then we give our schema to the builder and provide the result to Sanity
 export default [
@@ -165,7 +166,7 @@ export default [
     TestimonialsSection,
     Testimonials,
     PortfolioSection,
-    portfolioItem,
+    PortfolioItem,
     headerContentContainer,
     footerContentContainer,
     HeaderSection,

sanityIo/schemas/sections/HeaderSection.js

@@ -1,3 +1,5 @@
+import {ColorListing} from "../mui/ColorListing";
+
 export default {
     name: 'HeaderSection',
     title: 'Header Section',
@@ -18,6 +20,17 @@ export default {
             title: 'CTA Button Text',
             type: 'string'
         },
+        {
+            name: 'logoImgSrc',
+            title: 'Logo Image',
+            type: 'image'
+        },
+        {
+            name: 'backgroundColor',
+            title: 'Background Color',
+            type: 'string',
+            options: {list: ColorListing}
+        },
         {
             name: 'isSearch',
             title: 'Is Search included in header',

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

src/common/sanityIo/groqQueries.ts

@@ -88,6 +88,7 @@ const HOMEPAGE = `_type,
           metaImage,
           theme->,
           headerContent {
+            ...,
             "content": content[]->{
                 ...,
                 headerMenuRef->{

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,19 +600,23 @@ export type DevelopmentHeaderSectionType = {
     headerMenuRef: SanityMenuContainer
 }
 export type HeaderSectionType = {
-    name: string
-    isSearch: boolean
-    isEnhanced: boolean
-    ctaButtonText: string
-    ctaButtonLink: string
-    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

src/components/FooterBlockContentLayoutContainer.tsx

@@ -63,20 +63,6 @@ const FooterBlockContentLayoutContainer: FunctionComponent<FooterBlockContentLay
                                     </Grid>
                                 </Card></Grid>
                         </Grid>
-                    case 'DevelopmentFooterSection':
-                        const developmentFooter: DevelopmentFooterSectionType = columnLayoutContainer
-
-                        return (
-                            <ThemeProvider key={'BOTTOM_OF_PAGE_DEV'} theme={WebDevSiteTheme}><Grid container item
-                                                                                                    xs={12}
-                            >
-                                <Link id={"BOTTOM_OF_PAGE"} underline="hover"><></>
-                                </Link>
-                                <WebDevFooter
-                                    pageFooter={developmentFooter.footerMenuRef}
-                                />
-                            </Grid></ThemeProvider>
-                        );
                     case 'FooterSection':
                         const footer: FooterSectionType = columnLayoutContainer
 

src/components/HeaderBlockContentLayoutContainer.tsx

@@ -10,6 +10,7 @@ import Header from "./templates/mackenzies-mind/header/Header";
 import WebDevSiteTheme from "../theme/WebDevSiteTheme";
 import EnhancedHeader from "./templates/mackenzies-mind/header/EnhancedHeader";
 import CustomizedThemeContext from "./customized-theme-provider/CustomizedThemeContext";
+import {convertToHexCode} from "../theme/common/ColorPalette";
 
 export type HeaderBlockContentLayoutContainerProps = {
     content?: any,
@@ -88,23 +89,6 @@ const HeaderBlockContentLayoutContainer: FunctionComponent<HeaderBlockContentLay
                                     </Grid>
                                 </Card></Grid>
                         </Grid>
-                    case 'DevelopmentHeaderSection':
-                        const developmentHeader: DevelopmentHeaderSectionType = columnLayoutContainer
-
-                        return (
-                            <ThemeProvider theme={WebDevSiteTheme} key={'TOP_OF_PAGE_DEV'}>
-                                <Grid container item xs={12}
-                                      style={{height: WebDevSiteTheme.mixins.toolbar.height}}
-                                      alignContent='center'
-                                      alignItems='center'>
-                                    <Link id={"TOP_OF_PAGE"} underline="hover"><></>
-                                    </Link>
-                                    <DevelopmentHeader
-                                        pageHeader={developmentHeader.headerMenuRef}
-                                    />
-                                </Grid>
-                            </ThemeProvider>
-                        );
                     case 'HeaderSection':
                         const header: HeaderSectionType = columnLayoutContainer
 
@@ -114,7 +98,7 @@ const HeaderBlockContentLayoutContainer: FunctionComponent<HeaderBlockContentLay
                                 </Link>
                                 {
                                     showBasicHeader || !header.isEnhanced ?
-                                        <Header isSearch={header.isSearch} isAppBar={true}
+                                        <Header backgroundColor={header.backgroundColor}  isSearch={header.isSearch} isAppBar={true}
                                                 pageHeader={header.headerMenuRef}/>
                                         : <EnhancedHeader pageHeader={header}/>
                                 }