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}/>
  }