diff --git a/.storybook/main.ts b/.storybook/main.ts index 098b9bf9..8e29e059 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -12,7 +12,8 @@ const config: StorybookConfig = { "@storybook/addon-essentials", "@storybook/preset-create-react-app", 'storybook-addon-material-ui', - "@storybook/addon-mdx-gfm" + "@storybook/addon-mdx-gfm", + '@storybook/addon-styling' ], }; diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 15f13738..fbfd551c 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,7 +1,23 @@ -import {muiTheme} from "storybook-addon-material-ui"; -import MackenziesMindTheme from "../src/theme/DigitalResumeTheme"; +import DigitalResumeTheme from "../src/theme/DigitalResumeTheme"; import {QueryClient, QueryClientProvider} from "react-query"; -import {BrowserRouter} from "react-router-dom"; +import {BrowserRouter, Navigate, Route, Routes} from "react-router-dom"; +import React from 'react'; + +import {Preview} from '@storybook/react'; +import {CssBaseline, Grid, MuiThemeProvider} from "@material-ui/core"; +import WebDevSiteTheme from "../src/theme/WebDevSiteTheme"; +import TransformHWTheme from "../src/theme/TransformHWTheme"; +import {withThemeFromJSXProvider} from "@storybook/addon-styling"; +import PageProvider from "../src/components/page-context/PageProvider"; +import HomePageResumeData from "../src/stories/data/HomePageData"; +import ModalProvider from "../src/components/snackbar-context/ModalProvider"; +import SnackbarProvider + from "../src/components/modal-context/SnackbarProvider"; +import MediaQueriesProvider from "../src/components/media-queries-context/MediaQueriesProvider"; +import AmenityProvider from "../src/components/amenity-context/AmenityProvider"; +import PageMux from "../src/components/mackenzies-mind/pages/PageMux"; +import FourOhFour from "../src/components/transform-hw/pages/error-page/FourOhFour"; +import {RoutesEnum} from "../src/App"; // // export const parameters = { // actions: {argTypesRegex: "^on[A-Z].*"}, @@ -31,23 +47,35 @@ const mockedQueryClient = new QueryClient({ // muiTheme([MackenziesMindTheme]), // ]; - -import React from 'react'; - -import { Preview } from '@storybook/react'; -import {MuiThemeProvider} from "@material-ui/core"; -import DigitalResumeTheme from "../src/theme/DigitalResumeTheme"; - const preview: Preview = { decorators: [ (Story) => ( - - - - - + + + + + + + + + + + + + + + ), - + withThemeFromJSXProvider({ + themes: { + webDev: WebDevSiteTheme, + resume: DigitalResumeTheme, + thw: TransformHWTheme + }, + Provider: MuiThemeProvider, + GlobalStyles: CssBaseline, + }) +// muiTheme([DigitalResumeTheme, WebDevSiteTheme, TransformHWTheme]) ], }; diff --git a/functions/src/groqQueries.ts b/functions/src/groqQueries.ts index f241560d..3cd015cf 100644 --- a/functions/src/groqQueries.ts +++ b/functions/src/groqQueries.ts @@ -97,6 +97,7 @@ const HOMEPAGE = `_type, ${SERVICE} }, "serviceAmenities": serviceAmenities[]->, + "prosList": prosList[]->, "skillsets": skillsets[]{ ..., "skills": skills[]->{ diff --git a/package-lock.json b/package-lock.json index d812b348..358c122e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@sanity/client": "^2.8.0", "@sanity/types": "^2.34.0", "@storybook/addon-docs": "^7.4.5", + "@storybook/addon-styling": "^1.3.7", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", @@ -6796,6 +6797,109 @@ } } }, + "node_modules/@storybook/addon-styling": { + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/@storybook/addon-styling/-/addon-styling-1.3.7.tgz", + "integrity": "sha512-JSBZMOrSw/3rlq5YoEI7Qyq703KSNP0Jd+gxTWu3/tP6245mpjn2dXnR8FvqVxCi+FG4lt2kQyPzgsuwEw1SSA==", + "dependencies": { + "@babel/template": "^7.20.7", + "@babel/types": "^7.21.5", + "@storybook/api": "^7.0.12", + "@storybook/components": "^7.0.12", + "@storybook/core-common": "^7.0.12", + "@storybook/core-events": "^7.0.12", + "@storybook/manager-api": "^7.0.12", + "@storybook/node-logger": "^7.0.12", + "@storybook/preview-api": "^7.0.12", + "@storybook/theming": "^7.0.12", + "@storybook/types": "^7.0.12", + "css-loader": "^6.7.3", + "less-loader": "^11.1.0", + "postcss-loader": "^7.2.4", + "prettier": "^2.8.0", + "resolve-url-loader": "^5.0.0", + "sass-loader": "^13.2.2", + "style-loader": "^3.3.2" + }, + "bin": { + "addon-styling-setup": "postinstall.js" + }, + "peerDependencies": { + "less": "^3.5.0 || ^4.0.0", + "postcss": "^7.0.0 || ^8.0.1", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", + "webpack": "^5.0.0" + }, + "peerDependenciesMeta": { + "less": { + "optional": true + }, + "postcss": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + }, + "webpack": { + "optional": true + } + } + }, + "node_modules/@storybook/addon-styling/node_modules/resolve-url-loader": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-5.0.0.tgz", + "integrity": "sha512-uZtduh8/8srhBoMx//5bwqjQ+rfYOUq8zC9NrMUGtjBiGTtFJM42s58/36+hTqeqINcnYe08Nj3LkK9lW4N8Xg==", + "dependencies": { + "adjust-sourcemap-loader": "^4.0.0", + "convert-source-map": "^1.7.0", + "loader-utils": "^2.0.0", + "postcss": "^8.2.14", + "source-map": "0.6.1" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@storybook/addon-styling/node_modules/sass-loader": { + "version": "13.3.2", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-13.3.2.tgz", + "integrity": "sha512-CQbKl57kdEv+KDLquhC+gE3pXt74LEAzm+tzywcA0/aHZuub8wTErbjAoNI57rPUWRYRNC5WUnNl8eGJNbDdwg==", + "dependencies": { + "neo-async": "^2.6.2" + }, + "engines": { + "node": ">= 14.15.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "fibers": ">= 3.1.0", + "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0", + "sass": "^1.3.0", + "sass-embedded": "*", + "webpack": "^5.0.0" + }, + "peerDependenciesMeta": { + "fibers": { + "optional": true + }, + "node-sass": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + } + } + }, "node_modules/@storybook/addon-toolbars": { "version": "7.4.5", "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-7.4.5.tgz", @@ -6877,6 +6981,31 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/@storybook/api": { + "version": "7.4.5", + "resolved": "https://registry.npmjs.org/@storybook/api/-/api-7.4.5.tgz", + "integrity": "sha512-NpdW54D/fG0QOHtzjMDEG9+zKjmdq1GdsfVX2YEA7s9vq9FTKpnhNSifphEmDEKzwIm64euRj7FEz8mUPbh27Q==", + "dependencies": { + "@storybook/client-logger": "7.4.5", + "@storybook/manager-api": "7.4.5" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/@storybook/blocks": { "version": "7.4.5", "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-7.4.5.tgz", @@ -12143,18 +12272,18 @@ } }, "node_modules/css-loader": { - "version": "6.7.1", - "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz", - "integrity": "sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==", + "version": "6.8.1", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz", + "integrity": "sha512-xDAXtEVGlD0gJ07iclwWVkLoZOpEvAWaSyf6W18S2pOC//K8+qUDIx8IIT3D+HjnmkJPQeesOPv5aiUaJsCM2g==", "dependencies": { "icss-utils": "^5.1.0", - "postcss": "^8.4.7", + "postcss": "^8.4.21", "postcss-modules-extract-imports": "^3.0.0", - "postcss-modules-local-by-default": "^4.0.0", + "postcss-modules-local-by-default": "^4.0.3", "postcss-modules-scope": "^3.0.0", "postcss-modules-values": "^4.0.0", "postcss-value-parser": "^4.2.0", - "semver": "^7.3.5" + "semver": "^7.3.8" }, "engines": { "node": ">= 12.13.0" @@ -12167,17 +12296,6 @@ "webpack": "^5.0.0" } }, - "node_modules/css-loader/node_modules/icss-utils": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", - "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", - "engines": { - "node": "^10 || ^12 || >= 14" - }, - "peerDependencies": { - "postcss": "^8.1.0" - } - }, "node_modules/css-loader/node_modules/postcss-modules-extract-imports": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", @@ -12189,22 +12307,6 @@ "postcss": "^8.1.0" } }, - "node_modules/css-loader/node_modules/postcss-modules-local-by-default": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz", - "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==", - "dependencies": { - "icss-utils": "^5.0.0", - "postcss-selector-parser": "^6.0.2", - "postcss-value-parser": "^4.1.0" - }, - "engines": { - "node": "^10 || ^12 || >= 14" - }, - "peerDependencies": { - "postcss": "^8.1.0" - } - }, "node_modules/css-loader/node_modules/postcss-modules-scope": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz", @@ -15751,6 +15853,17 @@ "node": ">=0.10.0" } }, + "node_modules/icss-utils": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, "node_modules/idb": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.0.tgz", @@ -18030,6 +18143,14 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, + "node_modules/jiti": { + "version": "1.20.0", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.20.0.tgz", + "integrity": "sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==", + "bin": { + "jiti": "bin/jiti.js" + } + }, "node_modules/js-beautify": { "version": "1.14.6", "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.6.tgz", @@ -18477,6 +18598,22 @@ "node": ">=12" } }, + "node_modules/less-loader": { + "version": "11.1.3", + "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-11.1.3.tgz", + "integrity": "sha512-A5b7O8dH9xpxvkosNrP0dFp2i/dISOJa9WwGF3WJflfqIERE2ybxh1BFDj5CovC2+jCE4M354mk90hN6ziXlVw==", + "engines": { + "node": ">= 14.15.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "less": "^3.5.0 || ^4.0.0", + "webpack": "^5.0.0" + } + }, "node_modules/leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -20120,9 +20257,15 @@ } }, "node_modules/nanoid": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", - "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", + "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], "bin": { "nanoid": "bin/nanoid.cjs" }, @@ -20980,9 +21123,9 @@ "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==" }, "node_modules/postcss": { - "version": "8.4.18", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz", - "integrity": "sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==", + "version": "8.4.30", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz", + "integrity": "sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==", "funding": [ { "type": "opencollective", @@ -20991,10 +21134,14 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ], "dependencies": { - "nanoid": "^3.3.4", + "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" }, @@ -21452,13 +21599,13 @@ } }, "node_modules/postcss-loader": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.0.1.tgz", - "integrity": "sha512-VRviFEyYlLjctSM93gAZtcJJ/iSkPZ79zWbN/1fSH+NisBByEiVLqpdVDrPLVSi8DX0oJo12kL/GppTBdKVXiQ==", + "version": "7.3.3", + "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.3.3.tgz", + "integrity": "sha512-YgO/yhtevGO/vJePCQmTxiaEwER94LABZN0ZMT4A0vsak9TpO+RvKRs7EmJ8peIlB9xfXCsS7M8LjqncsUZ5HA==", "dependencies": { - "cosmiconfig": "^7.0.0", - "klona": "^2.0.5", - "semver": "^7.3.7" + "cosmiconfig": "^8.2.0", + "jiti": "^1.18.2", + "semver": "^7.3.8" }, "engines": { "node": ">= 14.15.0" @@ -21472,6 +21619,47 @@ "webpack": "^5.0.0" } }, + "node_modules/postcss-loader/node_modules/argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==" + }, + "node_modules/postcss-loader/node_modules/cosmiconfig": { + "version": "8.3.6", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz", + "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==", + "dependencies": { + "import-fresh": "^3.3.0", + "js-yaml": "^4.1.0", + "parse-json": "^5.2.0", + "path-type": "^4.0.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/d-fischer" + }, + "peerDependencies": { + "typescript": ">=4.9.5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/postcss-loader/node_modules/js-yaml": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "dependencies": { + "argparse": "^2.0.1" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, "node_modules/postcss-logical": { "version": "5.0.4", "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz", @@ -21586,6 +21774,22 @@ "postcss": "^8.2.15" } }, + "node_modules/postcss-modules-local-by-default": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz", + "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==", + "dependencies": { + "icss-utils": "^5.0.0", + "postcss-selector-parser": "^6.0.2", + "postcss-value-parser": "^4.1.0" + }, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, "node_modules/postcss-nested": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz", @@ -22121,7 +22325,6 @@ "version": "2.8.8", "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", - "dev": true, "bin": { "prettier": "bin-prettier.js" }, @@ -31872,6 +32075,53 @@ "ts-dedent": "^2.0.0" } }, + "@storybook/addon-styling": { + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/@storybook/addon-styling/-/addon-styling-1.3.7.tgz", + "integrity": "sha512-JSBZMOrSw/3rlq5YoEI7Qyq703KSNP0Jd+gxTWu3/tP6245mpjn2dXnR8FvqVxCi+FG4lt2kQyPzgsuwEw1SSA==", + "requires": { + "@babel/template": "^7.20.7", + "@babel/types": "^7.21.5", + "@storybook/api": "^7.0.12", + "@storybook/components": "^7.0.12", + "@storybook/core-common": "^7.0.12", + "@storybook/core-events": "^7.0.12", + "@storybook/manager-api": "^7.0.12", + "@storybook/node-logger": "^7.0.12", + "@storybook/preview-api": "^7.0.12", + "@storybook/theming": "^7.0.12", + "@storybook/types": "^7.0.12", + "css-loader": "^6.7.3", + "less-loader": "^11.1.0", + "postcss-loader": "^7.2.4", + "prettier": "^2.8.0", + "resolve-url-loader": "^5.0.0", + "sass-loader": "^13.2.2", + "style-loader": "^3.3.2" + }, + "dependencies": { + "resolve-url-loader": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-5.0.0.tgz", + "integrity": "sha512-uZtduh8/8srhBoMx//5bwqjQ+rfYOUq8zC9NrMUGtjBiGTtFJM42s58/36+hTqeqINcnYe08Nj3LkK9lW4N8Xg==", + "requires": { + "adjust-sourcemap-loader": "^4.0.0", + "convert-source-map": "^1.7.0", + "loader-utils": "^2.0.0", + "postcss": "^8.2.14", + "source-map": "0.6.1" + } + }, + "sass-loader": { + "version": "13.3.2", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-13.3.2.tgz", + "integrity": "sha512-CQbKl57kdEv+KDLquhC+gE3pXt74LEAzm+tzywcA0/aHZuub8wTErbjAoNI57rPUWRYRNC5WUnNl8eGJNbDdwg==", + "requires": { + "neo-async": "^2.6.2" + } + } + } + }, "@storybook/addon-toolbars": { "version": "7.4.5", "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-7.4.5.tgz", @@ -31913,6 +32163,15 @@ "@storybook/types": "7.4.5" } }, + "@storybook/api": { + "version": "7.4.5", + "resolved": "https://registry.npmjs.org/@storybook/api/-/api-7.4.5.tgz", + "integrity": "sha512-NpdW54D/fG0QOHtzjMDEG9+zKjmdq1GdsfVX2YEA7s9vq9FTKpnhNSifphEmDEKzwIm64euRj7FEz8mUPbh27Q==", + "requires": { + "@storybook/client-logger": "7.4.5", + "@storybook/manager-api": "7.4.5" + } + }, "@storybook/blocks": { "version": "7.4.5", "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-7.4.5.tgz", @@ -35828,40 +36087,25 @@ } }, "css-loader": { - "version": "6.7.1", - "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz", - "integrity": "sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==", + "version": "6.8.1", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz", + "integrity": "sha512-xDAXtEVGlD0gJ07iclwWVkLoZOpEvAWaSyf6W18S2pOC//K8+qUDIx8IIT3D+HjnmkJPQeesOPv5aiUaJsCM2g==", "requires": { "icss-utils": "^5.1.0", - "postcss": "^8.4.7", + "postcss": "^8.4.21", "postcss-modules-extract-imports": "^3.0.0", - "postcss-modules-local-by-default": "^4.0.0", + "postcss-modules-local-by-default": "^4.0.3", "postcss-modules-scope": "^3.0.0", "postcss-modules-values": "^4.0.0", "postcss-value-parser": "^4.2.0", - "semver": "^7.3.5" + "semver": "^7.3.8" }, "dependencies": { - "icss-utils": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", - "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==" - }, "postcss-modules-extract-imports": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==" }, - "postcss-modules-local-by-default": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz", - "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==", - "requires": { - "icss-utils": "^5.0.0", - "postcss-selector-parser": "^6.0.2", - "postcss-value-parser": "^4.1.0" - } - }, "postcss-modules-scope": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz", @@ -38472,6 +38716,11 @@ "safer-buffer": ">= 2.1.2 < 3" } }, + "icss-utils": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==" + }, "idb": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.0.tgz", @@ -40181,6 +40430,11 @@ } } }, + "jiti": { + "version": "1.20.0", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.20.0.tgz", + "integrity": "sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==" + }, "js-beautify": { "version": "1.14.6", "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.6.tgz", @@ -40547,6 +40801,11 @@ } } }, + "less-loader": { + "version": "11.1.3", + "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-11.1.3.tgz", + "integrity": "sha512-A5b7O8dH9xpxvkosNrP0dFp2i/dISOJa9WwGF3WJflfqIERE2ybxh1BFDj5CovC2+jCE4M354mk90hN6ziXlVw==" + }, "leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -41680,9 +41939,9 @@ } }, "nanoid": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", - "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==" + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", + "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==" }, "natural-compare": { "version": "1.4.0", @@ -42320,11 +42579,11 @@ "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==" }, "postcss": { - "version": "8.4.18", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz", - "integrity": "sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==", + "version": "8.4.30", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz", + "integrity": "sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==", "requires": { - "nanoid": "^3.3.4", + "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } @@ -42548,13 +42807,39 @@ } }, "postcss-loader": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.0.1.tgz", - "integrity": "sha512-VRviFEyYlLjctSM93gAZtcJJ/iSkPZ79zWbN/1fSH+NisBByEiVLqpdVDrPLVSi8DX0oJo12kL/GppTBdKVXiQ==", + "version": "7.3.3", + "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.3.3.tgz", + "integrity": "sha512-YgO/yhtevGO/vJePCQmTxiaEwER94LABZN0ZMT4A0vsak9TpO+RvKRs7EmJ8peIlB9xfXCsS7M8LjqncsUZ5HA==", "requires": { - "cosmiconfig": "^7.0.0", - "klona": "^2.0.5", - "semver": "^7.3.7" + "cosmiconfig": "^8.2.0", + "jiti": "^1.18.2", + "semver": "^7.3.8" + }, + "dependencies": { + "argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==" + }, + "cosmiconfig": { + "version": "8.3.6", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz", + "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==", + "requires": { + "import-fresh": "^3.3.0", + "js-yaml": "^4.1.0", + "parse-json": "^5.2.0", + "path-type": "^4.0.0" + } + }, + "js-yaml": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "requires": { + "argparse": "^2.0.1" + } + } } }, "postcss-logical": { @@ -42623,6 +42908,16 @@ "postcss-selector-parser": "^6.0.5" } }, + "postcss-modules-local-by-default": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz", + "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==", + "requires": { + "icss-utils": "^5.0.0", + "postcss-selector-parser": "^6.0.2", + "postcss-value-parser": "^4.1.0" + } + }, "postcss-nested": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz", @@ -42944,8 +43239,7 @@ "prettier": { "version": "2.8.8", "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", - "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", - "dev": true + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==" }, "pretty-bytes": { "version": "5.6.0", diff --git a/package.json b/package.json index b5ea1b78..ee4090be 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "@sanity/client": "^2.8.0", "@sanity/types": "^2.34.0", "@storybook/addon-docs": "^7.4.5", + "@storybook/addon-styling": "^1.3.7", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", @@ -95,7 +96,6 @@ ] }, "devDependencies": { - "@sanity/image-url": "^0.140.22", "@storybook/addon-actions": "^7.4.5", "@storybook/addon-essentials": "^7.4.5", diff --git a/src/App.tsx b/src/App.tsx index fc72255e..6ae2665c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -35,6 +35,7 @@ function App() { return ( + @@ -63,6 +64,7 @@ function App() { + ) diff --git a/src/components/BlockContentTypes.ts b/src/components/BlockContentTypes.ts index d28fd351..df9e712c 100644 --- a/src/components/BlockContentTypes.ts +++ b/src/components/BlockContentTypes.ts @@ -35,7 +35,7 @@ export type WhySwitchReasonType = { } export type WhySwitchSectionType = { - _id:string + _id: string imageSrc: SanityImageAsset imageAlt: string reasons: WhySwitchReasonType[] @@ -54,10 +54,10 @@ export type CryptoInYourPocketSectionType = { } export type SanityImageAsset = SanityImageSource | { - _type:string, + _type: string, asset: { - _ref:string, - _type:"reference" + _ref: string, + _type: "reference" } } @@ -79,29 +79,29 @@ export type ThwHeroContentSectionType = { export type ServiceAmenityTypeRef = SanityRef export type ServiceAmenityType = { name: string - imageSrc: SanityImageAsset + imageSrc?: SanityImageAsset title: string description: string -} +} & SanityDocumentFields export type ThwPositivePsychologySectionType = { - name: string - superTitle:string - contentTitle: string - contentText: string - contentBullets: string[] - imageSrc: SanityImageAsset - imageSrcAltText: string - ctaButtonText: string - ctaButtonLink: string + name?: string + superTitle?: string + contentTitle?: string + contentText?: string + contentBullets?: string[] + imageSrc?: SanityImageAsset + imageSrcAltText?: string + ctaButtonText?: string + ctaButtonLink?: string } export type ProprietorAtAGlanceType = { serviceName: string - serviceTitle:string + serviceTitle: string sessionList: string[] - dividerImage: SanityImageAsset + dividerImage?: SanityImageAsset amenitiesSectionTitle: string amenities: string[] ctaButtonText: string @@ -110,14 +110,14 @@ export type ProprietorAtAGlanceType = { export type ThwAboutProprietorSectionType = { name: string - proprietorImage: SanityImageAsset - proprietorName:string + proprietorImage?: SanityImageAsset + proprietorName: string proprietorTitle: string proprietorServices: ProprietorAtAGlanceType contentTitle: string contentText: string[] proprietorImageAltText: string - proprietorSignatureImage: SanityImageAsset + proprietorSignatureImage?: SanityImageAsset proprietorSignatureImageAltText: string ctaButtonText: string ctaButtonLink: string @@ -125,9 +125,10 @@ export type ThwAboutProprietorSectionType = { export type ThwMottoSectionType = { name: string + _type?: "transformMottoSection", contentText: string parallaxImage: SanityImageAsset - contentSuperTitle:string + contentSuperTitle: string } export type ThwServiceItemType = { @@ -143,16 +144,16 @@ export type ThwServiceItemType = { educationPageTitle: string educationPageSlimHeroImage: SanityImageAsset extendedDescriptions: string[] - benefitsOfServiceTitle:string - benefitsOfServiceContents:string[] - benefitsOfServiceBullets:string[] + benefitsOfServiceTitle: string + benefitsOfServiceContents: string[] + benefitsOfServiceBullets: string[] serviceAmenities: ServiceAmenityType[] slug: SanitySlug } export type ThwServiceItemNoRefType = { name: string - imageSrc: SanityImageAsset + imageSrc?: SanityImageAsset imageSrcAltText: string contentTitle: string contentText: string @@ -163,12 +164,12 @@ export type ThwServiceItemNoRefType = { educationPageTitle: string educationPageSlimHeroImage: SanityImageAsset extendedDescriptions: string[] - benefitsOfServiceTitle:string - benefitsOfServiceContents:string[] - benefitsOfServiceBullets:string[] + benefitsOfServiceTitle: string + benefitsOfServiceContents: string[] + benefitsOfServiceBullets: string[] serviceAmenities: ServiceAmenityType[] slug: SanitySlug -} +} & SanityDocumentFields export type ThwServicesSectionType = { @@ -180,18 +181,18 @@ export type ThwServicesSectionType = { servicesList: ThwServiceItemNoRefType[] } export type ThwWhyChooseUsSectionType = { - name: string - sectionTitle: string - prosList: SanityRef[] - imageSrc: SanityImageAsset - imageSrcAltText: string - ctaButtonText: string - ctaButtonLink: string + name?: string + sectionTitle?: string + prosList?: ThwWhyChooseUsItemType[] + imageSrc?: SanityImageAsset + imageSrcAltText?: string + ctaButtonText?: string + ctaButtonLink?: string } export type ThwWhyChooseUsItemType = { name: string - imageSrc: SanityImageAsset + imageSrc?: SanityImageAsset imageSrcAltText: string contentTitle: string contentText: string @@ -199,7 +200,7 @@ export type ThwWhyChooseUsItemType = { export type ThwContactUsSectionType = { name: string - bgImageSrc: SanityImageAsset + bgImageSrc?: SanityImageAsset lhsTitle: string lhsContentText: string phone?: string @@ -208,7 +209,7 @@ export type ThwContactUsSectionType = { twitter?: string, linkedIn?: string, youtube?: string, - rhsTitle:string, + rhsTitle: string, formSubmitButtonText: string } @@ -275,9 +276,12 @@ export type ResumeBioSectionType = { } - export type ResumeSkill = { _id?: string + _createdAt?: string + _updatedAt?: string + _rev?: string + _type?: "ResumeSkill" name?: string title?: string } @@ -296,23 +300,29 @@ export type ResumeSkillSectionType = { } - - export type ResumeExperience = { name?: string + _id?: string + _rev?: string + "_type": "ResumeExperience" title?: string companySubtitle?: string companyName?: string locationCity?: string locationState?: string - dateStart?: Date - dateEnd?: Date + dateStart?: Date | string + dateEnd?: Date | string description?: string + _createdAt?: string + _updatedAt?: string skillsUsed?: ResumeSkill[] + } export type ResumeExperienceSectionType = { name?: string + _type?: "ResumeExperienceSection" + title?: string introduction?: string experiences?: ResumeExperience[] @@ -321,16 +331,18 @@ export type ResumeExperienceSectionType = { export type ResumeEducation = { name?: string institutionName?: string - qualification?:string + qualification?: string locationCity?: string locationState?: string - dateStart?: Date - dateEnd?: Date + dateStart?: Date | string + dateEnd?: Date | string + _type: "ResumeEducation" description?: string } export type ResumeEducationSectionType = { name?: string + "_type": "ResumeEducationSection" title?: string introduction?: string educationExperiences?: ResumeEducation[] @@ -341,12 +353,14 @@ export type ResumeFeedback = { customerName?: string customerTitle?: string companyName?: string - qualification?:string + qualification?: string quote?: string - imageSrc?:SanityImageAsset + imageSrc?: SanityImageAsset + _type?: "ResumeFeedback" } export type ResumeFeedbackSectionType = { + _type?: "ResumeFeedbackSection" name?: string title?: string introduction?: string @@ -354,22 +368,24 @@ export type ResumeFeedbackSectionType = { } export type ResumePortfolioItem = { + _type?: "ResumePortfolioItem" name?: string title?: string coverImage?: SanityImageAsset - inceptionDate?: Date + inceptionDate?: Date | string slug?: SanitySlug - skillsHighlighted?:ResumeSkill[] + skillsHighlighted?: ResumeSkill[] detailTitle?: string detailDescription?: string linkToProd?: string linkToDev?: string - imageGallery?:SanityImageAsset[] + imageGallery?: SanityImageAsset[] } export type ResumePortfolioSectionType = { name?: string - preTitle?:string + _type?: "ResumePortfolioSection" + preTitle?: string title?: string introduction?: string portfolioEntries?: ResumePortfolioItem[] @@ -378,6 +394,7 @@ export type ResumePortfolioSectionType = { export type ResumeContactUsSectionType = { name: string + _type?: "ResumeContactUsSection" title?: string introduction?: string formSubmitButtonText: string @@ -397,7 +414,7 @@ export type WebDevHeroContentSectionType = { export type WebDevStatsCounterSectionType = { name: string title: string - stats: {statValue: string, statContent:string}[] + stats: { statValue: string, statContent: string }[] } @@ -414,7 +431,7 @@ export type WebDevAboutUsSectionType = { export type ServiceItemNoRefType = { name: string - imageSrc: SanityImageAsset + imageSrc?: SanityImageAsset imageSrcAltText: string contentTitle: string contentText: string @@ -425,9 +442,9 @@ export type ServiceItemNoRefType = { educationPageTitle: string educationPageSlimHeroImage: SanityImageAsset extendedDescriptions: string[] - benefitsOfServiceTitle:string - benefitsOfServiceContents:string[] - benefitsOfServiceBullets:string[] + benefitsOfServiceTitle: string + benefitsOfServiceContents: string[] + benefitsOfServiceBullets: string[] serviceAmenities: ServiceAmenityType[] slug: SanitySlug } @@ -446,10 +463,10 @@ export type WebDevTestimonialsType = { customerName?: string customerTitle?: string companyName?: string - qualification?:string + qualification?: string quoteSummary?: string quote?: string - imageSrc?:SanityImageAsset + imageSrc?: SanityImageAsset } export type WebDevTestimonialsSectionType = { @@ -482,18 +499,26 @@ export type HowItWorksSectionType = { } export type DevelopmentHeaderSectionType = { - name:string + name: string headerMenuRef: SanityMenuContainer } export type HeaderSectionType = { - name:string + name: string headerMenuRef: SanityMenuContainer } export type DevelopmentFooterSectionType = { - name:string + name: string footerMenuRef: SanityMenuContainer } export type FooterSectionType = { - name:string + name: string footerMenuRef: SanityMenuContainer +} + +export type SanityDocumentFields = { + _rev?: string + _createdAt?: string + _updatedAt?: string + _type?: string + _id?: string } \ No newline at end of file diff --git a/src/components/BusinessCard.tsx b/src/components/BusinessCard.tsx index 05f1ecc1..7a4d487b 100644 --- a/src/components/BusinessCard.tsx +++ b/src/components/BusinessCard.tsx @@ -16,9 +16,8 @@ import {Close, FileCopy} from "@material-ui/icons"; import DigitalResumeTheme, {COLORS} from "../theme/DigitalResumeTheme"; import ResumeSocialMedia from "./my-digital-resume/ResumeSocialMedia"; import {urlFor} from "./block-content-ui/static-pages/cmsStaticPagesClient"; -import {MainMenuAnchorType, SanityMenuContainer} from "../common/sanityIo/Types"; +import {MainMenuAnchorType, SanityMenuContainer, SanityTransformHwHomePage} from "../common/sanityIo/Types"; import PageContext from "./page-context/PageContext"; -import Logo from "./transform-hw/logo/Logo"; import {ResumeBioSectionType} from "./BlockContentTypes"; import MailTo from "./mail-to/MailTo"; import QrCodeContext from "./qr-code-context/QrCodeContext"; @@ -47,11 +46,12 @@ const useStyles = makeStyles((theme: Theme) => ); interface MainMenuProps { - menu: SanityMenuContainer + // menu: SanityMenuContainer + homePage: SanityTransformHwHomePage anchor: MainMenuAnchorType } -const BusinessCard: FunctionComponent = ({menu, anchor}) => { +const BusinessCard: FunctionComponent = ({anchor,homePage}) => { const [isDrawerOpen, setIsDrawerOpen] = useState() const location = useLocation() @@ -71,13 +71,13 @@ const BusinessCard: FunctionComponent = ({menu, anchor}) => { const classes = useStyles(DigitalResumeTheme) const theme = useTheme() - const pageContext = useContext(PageContext) + // const pageContext = useContext(PageContext) const [userBio, setUserBio] = React.useState() React.useEffect(() => { //find the bio in pagecontent - const bioSection = pageContext.page?.pageContent.content.filter((content: any) => { + const bioSection = homePage.pageContent.content.filter((content: any) => { if (content._type === "ResumeBioSection") { return true } @@ -88,7 +88,7 @@ const BusinessCard: FunctionComponent = ({menu, anchor}) => { setUserBio(bioSection[0]) - }, [pageContext.page?.pageContent]) + }, [homePage.pageContent]) const qrCodeContext = useContext(QrCodeContext) const share = async (url: string) => { @@ -118,7 +118,7 @@ const BusinessCard: FunctionComponent = ({menu, anchor}) => { backgroundSize: "cover", overflow: "visible", position: "relative", - backgroundImage: `url(${urlFor(pageContext.page?.businessCardImageSrc ?? "").url()})` + backgroundImage: `url(${urlFor(homePage.businessCardImageSrc ?? "").url()})` }} justifyContent='center' alignContent='flex-end'> = ({menu, anchor}) => { height: "max-content", padding: theme.spacing(2, 3) }}> - + @@ -150,7 +150,7 @@ const BusinessCard: FunctionComponent = ({menu, anchor}) => { - {pageContext.page?.phone} + {homePage.phone} @@ -163,12 +163,12 @@ const BusinessCard: FunctionComponent = ({menu, anchor}) => { - {pageContext.page?.email} + align='right'>{homePage.email} - {/*{pageContext.page?.email}*/} + {/*{homePage.email}*/} @@ -177,21 +177,21 @@ const BusinessCard: FunctionComponent = ({menu, anchor}) => { Website + align='center'>{homePage.website} @@ -224,7 +224,7 @@ const BusinessCard: FunctionComponent = ({menu, anchor}) => { Virtual Meeting + align='center'>{homePage.bookAppointmentLink} @@ -320,7 +320,7 @@ const BusinessCard: FunctionComponent = ({menu, anchor}) => { */} - 0) && !isEmail(email)))} - clickHandler={createLead} - color="secondary" variant="contained">Send Message - - - {getHelperText()} + className={classes.inputAdornmentTextBlockContainer}> + + + + ), + className: classes.formInput + }} + /> + + + {/**/} + 0) && !isEmail(email)))} + clickHandler={createLead} + color="secondary" variant="contained">Send Message + + + {getHelperText()} + - + + ) } diff --git a/src/components/transform-hw/ThwHeroContentSection.tsx b/src/components/transform-hw/ThwHeroContentSection.tsx index a4ccefe2..d0470e68 100644 --- a/src/components/transform-hw/ThwHeroContentSection.tsx +++ b/src/components/transform-hw/ThwHeroContentSection.tsx @@ -1,6 +1,6 @@ import React, {FunctionComponent, useContext} from 'react' import {makeStyles, Theme} from '@material-ui/core/styles' -import {Button, Grid, Typography} from '@material-ui/core' +import {Button, Grid, MuiThemeProvider, Typography, useTheme} from '@material-ui/core' import {urlFor} from '../block-content-ui/static-pages/cmsStaticPagesClient' import {ThwHeroContentSectionType} from "../BlockContentTypes"; import clsx from "clsx"; @@ -8,6 +8,7 @@ import PageContext from "../page-context/PageContext"; import useCustomStyles from "../mackenzies-mind/pages/Styles"; import DigitalResumeTheme, {rainbow, raleway} from "../../theme/DigitalResumeTheme"; import firebaseAnalyticsClient from "../../utils/firebase/FirebaseAnalyticsClient"; +import TransformHWTheme from "../../theme/TransformHWTheme"; interface IProps { sectionData: ThwHeroContentSectionType @@ -33,7 +34,7 @@ export const useStyles = makeStyles((theme: Theme) => ({ backgroundColor: 'transparent', }, contentBullets: { - borderLeft: `4px solid ${theme.palette.primary.main}`, + borderLeft: `4px solid ${TransformHWTheme.palette.primary.main}`, paddingLeft: '26px', } })) @@ -51,11 +52,11 @@ const ThwHeroContentSection: FunctionComponent = (props) => { } const pageContext = useContext(PageContext) - +const theme = useTheme(); const classes = useStyles(classParameters) const globalClasses = useCustomStyles({}) return ( - + @@ -65,7 +66,7 @@ const ThwHeroContentSection: FunctionComponent = (props) => { {props.sectionData.contentWelcomeMessage} + style={{color: theme.palette.text.secondary}}>{props.sectionData.contentWelcomeMessage} = (props) => { - + ) } diff --git a/src/components/transform-hw/ThwMottoSection.tsx b/src/components/transform-hw/ThwMottoSection.tsx index b991506d..56fcb2e2 100644 --- a/src/components/transform-hw/ThwMottoSection.tsx +++ b/src/components/transform-hw/ThwMottoSection.tsx @@ -1,6 +1,6 @@ import React, {FunctionComponent, useContext} from 'react' import {makeStyles, Theme} from '@material-ui/core/styles' -import {Grid, Typography} from '@material-ui/core' +import {Grid, MuiThemeProvider, Typography} from '@material-ui/core' import {urlFor} from '../block-content-ui/static-pages/cmsStaticPagesClient' import {ThwMottoSectionType} from "../BlockContentTypes"; import {Parallax} from 'react-parallax'; @@ -8,6 +8,7 @@ import clsx from "clsx"; import DigitalResumeTheme from "../../theme/DigitalResumeTheme"; import MediaQueriesContext from "../media-queries-context/MediaQueriesContext"; import useCustomStyles from "../mackenzies-mind/pages/Styles"; +import TransformHWTheme from "../../theme/TransformHWTheme"; export const useStyles = makeStyles((theme: Theme) => ({ root: { @@ -32,8 +33,10 @@ const ThwMottoSection: FunctionComponent = (props) => { const mediaQueriesContext = useContext(MediaQueriesContext) return ( - + @@ -45,12 +48,13 @@ const ThwMottoSection: FunctionComponent = (props) => { {props.sectionData.contentSuperTitle} - + {props.sectionData.contentText} - + ) } diff --git a/src/components/transform-hw/ThwPositivePsychology.tsx b/src/components/transform-hw/ThwPositivePsychology.tsx index be4fb609..6874ab93 100644 --- a/src/components/transform-hw/ThwPositivePsychology.tsx +++ b/src/components/transform-hw/ThwPositivePsychology.tsx @@ -1,14 +1,13 @@ import React, {FunctionComponent, useContext} from 'react' import {makeStyles, Theme} from '@material-ui/core/styles' -import {Button, Grid, Typography} from '@material-ui/core' +import {Button, Grid, MuiThemeProvider, Typography} from '@material-ui/core' import {urlFor} from '../block-content-ui/static-pages/cmsStaticPagesClient' import {ThwPositivePsychologySectionType} from "../BlockContentTypes"; import DigitalResumeTheme from "../../theme/DigitalResumeTheme"; import {v4 as uuidv4} from 'uuid' -import mediaQueries from "../../utils/mediaQueries"; import ResponsiveBullet from "../ResponsiveBullet"; -import PageContext from "../page-context/PageContext"; import MediaQueriesContext from "../media-queries-context/MediaQueriesContext"; +import TransformHWTheme from "../../theme/TransformHWTheme"; export const useStyles = makeStyles((theme: Theme) => ({ root: { @@ -29,14 +28,13 @@ interface IProps { } const PositivePsychologySection: FunctionComponent = (props) => { - const classes = useStyles(DigitalResumeTheme) + const classes = useStyles(TransformHWTheme) - const pageContext = useContext(PageContext) const mediaQueriesContext = useContext(MediaQueriesContext) return ( - + @@ -64,7 +62,7 @@ const PositivePsychologySection: FunctionComponent = (props) => { - {props.sectionData.contentBullets.map((reason: string) => { + {props.sectionData.contentBullets?.map((reason: string) => { return })} @@ -79,14 +77,14 @@ const PositivePsychologySection: FunctionComponent = (props) => { - {props.sectionData.imageSrcAltText} - + {!props.sectionData.imageSrc ? {'placeholder'}/ : + {props.sectionData.imageSrcAltText} + } - + ) } diff --git a/src/components/transform-hw/ThwServiceItem.tsx b/src/components/transform-hw/ThwServiceItem.tsx index 9a53dd5b..657b231e 100644 --- a/src/components/transform-hw/ThwServiceItem.tsx +++ b/src/components/transform-hw/ThwServiceItem.tsx @@ -74,7 +74,6 @@ const ThwServiceItem: FunctionComponent = (props: IProps) => { style={{marginBottom: "48px"}}>{props.service.contentText} - {/*//ts-ignore*/} {props.showAmenities && ({ root: { @@ -26,75 +26,63 @@ interface IProps { const ThwServicesSection: FunctionComponent = (props) => { const classes = useStyles(DigitalResumeTheme) - const pageContext = useContext(PageContext) const mediaQueriesContext = useContext(MediaQueriesContext) - - const [prosList, setProsList] = useState() - - React.useEffect(() => { - const realizedPros = props.sectionData?.prosList?.map((pro) => { - return cmsClient.fetchRef(pro).then((serviceResp) => { - return serviceResp - }) - }) - - Promise.all(realizedPros).then((response) => { - setProsList(response) - }).catch(console.log) - }, [props.sectionData]) return ( + + + + { + } + + + {props.sectionData.sectionTitle} + ____ + + + {props.sectionData.prosList?.map((pro, index: number) => { + return + + - - - - - - - {props.sectionData.sectionTitle} - ____ - - - {prosList?.map((service, index: number) => { - return - - - - - - - - {service.contentTitle} - - - {service.contentText} + + + + + {pro.contentTitle} + + + {pro.contentText} + + {index < (props.sectionData.prosList?.length ?? 0) - 1 && + } - {index < prosList.length - 1 && } - - })} + })} + - - + ) } diff --git a/src/components/transform-hw/pages/BusinessCardSubmitEmail.tsx b/src/components/transform-hw/pages/BusinessCardSubmitEmail.tsx index 6d7daa66..a2378de9 100644 --- a/src/components/transform-hw/pages/BusinessCardSubmitEmail.tsx +++ b/src/components/transform-hw/pages/BusinessCardSubmitEmail.tsx @@ -36,13 +36,13 @@ export const useStyles = makeStyles((theme: Theme) => ({ }, })) -interface IProps { +export interface SubmitEmailIProps { emailFieldText: string emailButtonText: string subscribeText: string } -const BusinessCardSubmitEmail: FunctionComponent = (props: IProps) => { +const BusinessCardSubmitEmail: FunctionComponent = (props: SubmitEmailIProps) => { const theme = useTheme() const classes = useCustomStyles(DigitalResumeTheme) const myClasses = useStyles(DigitalResumeTheme) diff --git a/src/components/web-dev-site/WebDevServiceItem.tsx b/src/components/web-dev-site/WebDevServiceItem.tsx index 9c1ca5b9..92871d33 100644 --- a/src/components/web-dev-site/WebDevServiceItem.tsx +++ b/src/components/web-dev-site/WebDevServiceItem.tsx @@ -63,7 +63,7 @@ const WebDevServiceItem: FunctionComponent = (props: IProps) => { variant='h3' style={{...elainSansExtraBold}} color='primary'>{props.service.contentTitle} - + {/* = { - title:"Resume/Components/Button", + title:"Resume/Components/Loading Button", component: LoadingButton, }; @@ -21,29 +22,68 @@ type Story = StoryObj; const buttonText = "Button Text" export const Primary: Story = { - render: () => {buttonText}, + args: { + color: "primary", + isLoading: false, + children:buttonText + }, + render: ({color, isLoading, children}:PropsWithChildren) => {children}, }; export const PrimaryDisabled: Story = { - render: () => {buttonText}, + args: { + color: "primary", + disabled: false, + children: buttonText + }, + render: ({color, isLoading, children, disabled}:PropsWithChildren) => {children}, }; export const Secondary: Story = { - render: () => {buttonText}, + args: { + color: "secondary", + children: buttonText + }, + render: ({color, children}:PropsWithChildren) => {children}, }; export const Loading: Story = { - render: () => {buttonText}, + args: { + color: "primary", + isLoading: true, + width: 250, + children: buttonText + }, + render: ({color,isLoading, children, width}:PropsWithChildren) => {children}, }; export const SecondaryLoading: Story = { - render: () => {buttonText}, + args: { + color: "secondary", + isLoading: true, + width: 250, + children: buttonText + }, + render: ({color,isLoading, children, width}:PropsWithChildren) => {children}, + }; export const Grouped: Story = { render: () => - One - Two - Three, + + One + + + + Two + + + Three + + + Four + , + }; \ No newline at end of file diff --git a/src/stories/digital-resume/ResumeBio.stories.tsx b/src/stories/digital-resume/ResumeBio.stories.tsx index 6a16a746..af1944d7 100644 --- a/src/stories/digital-resume/ResumeBio.stories.tsx +++ b/src/stories/digital-resume/ResumeBio.stories.tsx @@ -1,10 +1,10 @@ import type {Meta, StoryObj} from '@storybook/react'; import ResumeBio from "../../components/my-digital-resume/ResumeBio"; -import homePageResume from "../data/HomePage"; -import ResumeBioSectionData from "../data/ResumeBioSection"; +import homePageResume from "../data/HomePageData"; +import ResumeBioSectionData from "../data/ResumeBioSectionData"; const meta: Meta = { - title:"Resume/Resume Bio Section", + title:"Resume/Section/Resume Bio Section", component: ResumeBio, }; @@ -20,5 +20,9 @@ type Story = StoryObj; const buttonText = "Button Text" export const Primary: Story = { - render: () => , + args :{ + sectionData: ResumeBioSectionData, + homePage: homePageResume + }, + render: ({sectionData, homePage}) => , }; diff --git a/src/stories/digital-resume/ResumeBusinessCardFab.stories.tsx b/src/stories/digital-resume/ResumeBusinessCardFab.stories.tsx new file mode 100644 index 00000000..8547258d --- /dev/null +++ b/src/stories/digital-resume/ResumeBusinessCardFab.stories.tsx @@ -0,0 +1,34 @@ +import type {Meta, StoryObj} from '@storybook/react'; +import LoadingButton from "../../components/loading-button/LoadingButton"; +import {ButtonGroupMemberEnum} from "../../components/loading-button/ButtonGroupMemberEnum"; +import {Grid} from "@material-ui/core"; +import ResumeSocialMedia from "../../components/my-digital-resume/ResumeSocialMedia"; +import homePageResume from "../data/HomePageData"; +import BusinessCard from "../../components/BusinessCard"; +import React from "react"; + + +const meta: Meta = { + title:"Resume/Page Components/Resume Business Card", + component: BusinessCard, +}; + +export default meta; +type Story = StoryObj; + + +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/react/api/csf + * to learn how to use render functions. + */ + +const buttonText = "Button Text" +// console.log(homePageResume.headerContent.content[0]) +export const Primary: Story = { + args:{ + homePage: homePageResume, + anchor:'bottom' + }, + render: ({homePage, anchor}) => , +}; \ No newline at end of file diff --git a/src/stories/digital-resume/ResumeContactUs.stories.tsx b/src/stories/digital-resume/ResumeContactUs.stories.tsx new file mode 100644 index 00000000..58e1991b --- /dev/null +++ b/src/stories/digital-resume/ResumeContactUs.stories.tsx @@ -0,0 +1,27 @@ +import type {Meta, StoryObj} from '@storybook/react'; +import ResumePortfolioSectionData from "../data/ResumePortfolioSectionData"; +import ResumePortfolioSection from '../../components/my-digital-resume/ResumePortfolioSection'; +import ResumeContactUsSection from "../../components/my-digital-resume/ResumeContactUsSection"; +import ResumeContactSectionData from "../data/ResumeContactSectionData"; + +const meta: Meta = { + title:"Resume/Section/Resume Contact Us Section", + component: ResumeContactUsSection, +}; + +export default meta; +type Story = StoryObj; + + +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/react/api/csf + * to learn how to use render functions. + */ + +export const Primary: Story = { + args:{ + sectionData: ResumeContactSectionData + }, + render: ({sectionData}) => , +}; diff --git a/src/stories/digital-resume/ResumeEducation.stories.tsx b/src/stories/digital-resume/ResumeEducation.stories.tsx new file mode 100644 index 00000000..6c1d4f97 --- /dev/null +++ b/src/stories/digital-resume/ResumeEducation.stories.tsx @@ -0,0 +1,29 @@ +import type {Meta, StoryObj} from '@storybook/react'; +import ResumeSkillsSection from "../../components/my-digital-resume/ResumeSkillsSection"; +import ResumeSkillSectionData from "../data/ResumeSkillSectionData"; +import ResumeExperienceSection from "../../components/my-digital-resume/ResumeExperienceSection"; +import ResumeExperienceSectionData from "../data/ResumeExperienceSectionData"; +import ResumeEducationSection from "../../components/my-digital-resume/ResumeEducationSection"; +import ResumeEducationSectionData from "../data/ResumeEducationSectionData"; + +const meta: Meta = { + title:"Resume/Section/Resume Education Section", + component: ResumeEducationSection, +}; + +export default meta; +type Story = StoryObj; + + +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/react/api/csf + * to learn how to use render functions. + */ + +export const Primary: Story = { + args:{ + sectionData: ResumeEducationSectionData + }, + render: ({sectionData}) => , +}; diff --git a/src/stories/digital-resume/ResumeExperience.stories.tsx b/src/stories/digital-resume/ResumeExperience.stories.tsx new file mode 100644 index 00000000..568acc8a --- /dev/null +++ b/src/stories/digital-resume/ResumeExperience.stories.tsx @@ -0,0 +1,27 @@ +import type {Meta, StoryObj} from '@storybook/react'; +import ResumeSkillsSection from "../../components/my-digital-resume/ResumeSkillsSection"; +import ResumeSkillSectionData from "../data/ResumeSkillSectionData"; +import ResumeExperienceSection from "../../components/my-digital-resume/ResumeExperienceSection"; +import ResumeExperienceSectionData from "../data/ResumeExperienceSectionData"; + +const meta: Meta = { + title:"Resume/Section/Resume Experience Section", + component: ResumeExperienceSection, +}; + +export default meta; +type Story = StoryObj; + + +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/react/api/csf + * to learn how to use render functions. + */ + +export const Primary: Story = { + args:{ + sectionData: ResumeExperienceSectionData + }, + render: ({sectionData}) => , +}; diff --git a/src/stories/digital-resume/ResumeFeedback.stories.tsx b/src/stories/digital-resume/ResumeFeedback.stories.tsx new file mode 100644 index 00000000..d82e691f --- /dev/null +++ b/src/stories/digital-resume/ResumeFeedback.stories.tsx @@ -0,0 +1,29 @@ +import type {Meta, StoryObj} from '@storybook/react'; +import ResumeSkillsSection from "../../components/my-digital-resume/ResumeSkillsSection"; +import ResumeSkillSectionData from "../data/ResumeSkillSectionData"; +import ResumeExperienceSection from "../../components/my-digital-resume/ResumeExperienceSection"; +import ResumeExperienceSectionData from "../data/ResumeExperienceSectionData"; +import ResumeFeedbackSection from "../../components/my-digital-resume/ResumeFeedbackSection"; +import ResumeFeedbackSectionData from "../data/ResumeFeedbackSectionData"; + +const meta: Meta = { + title:"Resume/Section/Resume Feedback Section", + component: ResumeFeedbackSection, +}; + +export default meta; +type Story = StoryObj; + + +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/react/api/csf + * to learn how to use render functions. + */ + +export const Primary: Story = { + args:{ + sectionData: ResumeFeedbackSectionData + }, + render: ({sectionData}) => , +}; diff --git a/src/stories/digital-resume/ResumeFooter.stories.tsx b/src/stories/digital-resume/ResumeFooter.stories.tsx new file mode 100644 index 00000000..db67bc9c --- /dev/null +++ b/src/stories/digital-resume/ResumeFooter.stories.tsx @@ -0,0 +1,27 @@ +import type {Meta, StoryObj} from '@storybook/react'; +import homePageResume from "../data/HomePageData"; +import Header from "../../components/mackenzies-mind/header/Header"; +import Footer from "../../components/mackenzies-mind/footer/Footer"; + + +const meta: Meta = { + title: "Resume/Page Components/Resume Footer", + component: Footer, +}; + +export default meta; +type Story = StoryObj; + + +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/react/api/csf + * to learn how to use render functions. + */ + +export const Primary: Story = { + args: { + pageFooter: homePageResume.footerContent.content[0].footerMenuRef + }, + render: ({pageFooter}) =>
, +}; \ No newline at end of file diff --git a/src/stories/digital-resume/ResumeHeader.stories.tsx b/src/stories/digital-resume/ResumeHeader.stories.tsx new file mode 100644 index 00000000..21d46241 --- /dev/null +++ b/src/stories/digital-resume/ResumeHeader.stories.tsx @@ -0,0 +1,26 @@ +import type {Meta, StoryObj} from '@storybook/react'; +import homePageResume from "../data/HomePageData"; +import Header from "../../components/mackenzies-mind/header/Header"; + + +const meta: Meta = { + title: "Resume/Page Components/Resume Header", + component: Header, +}; + +export default meta; +type Story = StoryObj; + + +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/react/api/csf + * to learn how to use render functions. + */ + +export const Primary: Story = { + args: { + pageHeader: homePageResume.headerContent.content[0].headerMenuRef + }, + render: ({pageHeader}) =>
, +}; \ No newline at end of file diff --git a/src/stories/digital-resume/ResumePortfolio.stories.tsx b/src/stories/digital-resume/ResumePortfolio.stories.tsx new file mode 100644 index 00000000..338ce6f4 --- /dev/null +++ b/src/stories/digital-resume/ResumePortfolio.stories.tsx @@ -0,0 +1,25 @@ +import type {Meta, StoryObj} from '@storybook/react'; +import ResumePortfolioSectionData from "../data/ResumePortfolioSectionData"; +import ResumePortfolioSection from '../../components/my-digital-resume/ResumePortfolioSection'; + +const meta: Meta = { + title:"Resume/Section/Resume Portfolio Section", + component: ResumePortfolioSection, +}; + +export default meta; +type Story = StoryObj; + + +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/react/api/csf + * to learn how to use render functions. + */ + +export const Primary: Story = { + args:{ + sectionData: ResumePortfolioSectionData + }, + render: ({sectionData}) => , +}; diff --git a/src/stories/digital-resume/ResumeSkills.stories.tsx b/src/stories/digital-resume/ResumeSkills.stories.tsx index 160daa58..4406a557 100644 --- a/src/stories/digital-resume/ResumeSkills.stories.tsx +++ b/src/stories/digital-resume/ResumeSkills.stories.tsx @@ -1,9 +1,11 @@ import type {Meta, StoryObj} from '@storybook/react'; import ResumeSkillsSection from "../../components/my-digital-resume/ResumeSkillsSection"; -import ResumeSkillSectionData from "../data/ResumeSkillSection"; +import ResumeSkillSectionData from "../data/ResumeSkillSectionData"; +import ResumeBioSectionData from "../data/ResumeBioSectionData"; +import homePageResume from "../data/HomePageData"; const meta: Meta = { - title:"Resume/Resume Skills Section", + title:"Resume/Section/Resume Skills Section", component: ResumeSkillsSection, }; @@ -18,5 +20,8 @@ type Story = StoryObj; */ export const Primary: Story = { - render: () => , + args :{ + sectionData: ResumeSkillSectionData, + }, + render: ({sectionData}) => , }; diff --git a/src/stories/digital-resume/ResumeSocialMedia.stories.tsx b/src/stories/digital-resume/ResumeSocialMedia.stories.tsx index d8a7d24b..7d0bb201 100644 --- a/src/stories/digital-resume/ResumeSocialMedia.stories.tsx +++ b/src/stories/digital-resume/ResumeSocialMedia.stories.tsx @@ -3,7 +3,7 @@ import LoadingButton from "../../components/loading-button/LoadingButton"; import {ButtonGroupMemberEnum} from "../../components/loading-button/ButtonGroupMemberEnum"; import {Grid} from "@material-ui/core"; import ResumeSocialMedia from "../../components/my-digital-resume/ResumeSocialMedia"; -import homePageResume from "../data/HomePage"; +import homePageResume from "../data/HomePageData"; const meta: Meta = { @@ -23,5 +23,8 @@ type Story = StoryObj; const buttonText = "Button Text" export const Primary: Story = { - render: () => , + args:{ + homePage:homePageResume + }, + render: ({homePage}) => , }; \ No newline at end of file diff --git a/src/stories/digital-resume/SubmitEmail.stories.tsx b/src/stories/digital-resume/SubmitEmail.stories.tsx new file mode 100644 index 00000000..089c78cc --- /dev/null +++ b/src/stories/digital-resume/SubmitEmail.stories.tsx @@ -0,0 +1,34 @@ +import type {Meta, StoryObj} from '@storybook/react'; +import LoadingButton, {LoadingButtonIProps} from "../../components/loading-button/LoadingButton"; +import {ButtonGroupMemberEnum} from "../../components/loading-button/ButtonGroupMemberEnum"; +import {Grid} from "@material-ui/core"; +import React, {PropsWithChildren} from "react"; +import BusinessCardSubmitEmail, {SubmitEmailIProps} from "../../components/transform-hw/pages/BusinessCardSubmitEmail"; +import SubmitEmail from "../../components/transform-hw/pages/SubmitEmail"; + + +const meta: Meta = { + title:"Resume/Page Components/Submit Email", + component: BusinessCardSubmitEmail , +}; + +export default meta; +type Story = StoryObj; + + +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/react/api/csf + * to learn how to use render functions. + */ + +export const Primary: Story = { + args: { + emailButtonText:'Submit', + emailFieldText:"Your Email Address.", + subscribeText:"Want a copy of my resume emailed to you?" + }, + render: ({emailFieldText, emailButtonText, subscribeText}:PropsWithChildren) => , +}; \ No newline at end of file diff --git a/src/stories/transform/ThwAboutProprietorSection.stories.tsx b/src/stories/transform/ThwAboutProprietorSection.stories.tsx new file mode 100644 index 00000000..6bac5692 --- /dev/null +++ b/src/stories/transform/ThwAboutProprietorSection.stories.tsx @@ -0,0 +1,29 @@ +import type {Meta, StoryObj} from '@storybook/react'; +import thwMottoData from "../data/ThwMottoData"; +import ThwPositivePsychology from "../../components/transform-hw/ThwPositivePsychology"; +import thwPositivePsychologyData from "../data/ThwPositivePsychologyData"; +import AboutTheProprietorSection from "../../components/transform-hw/AboutTheProprietorSection"; +import thwAboutProprietorData from "../data/ThwAboutTheProprietorData"; + + +const meta: Meta = { + title:"THW/Section/THW About the Proprietor Section", + component: AboutTheProprietorSection, +}; + +export default meta; +type Story = StoryObj; + + +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/react/api/csf + * to learn how to use render functions. + */ + +export const Primary: Story = { + args:{ + sectionData:thwAboutProprietorData + }, + render: ({sectionData}) => , +}; diff --git a/src/stories/transform/ThwAboutUsSection.stories.tsx b/src/stories/transform/ThwAboutUsSection.stories.tsx new file mode 100644 index 00000000..15d16a0f --- /dev/null +++ b/src/stories/transform/ThwAboutUsSection.stories.tsx @@ -0,0 +1,27 @@ +import type {Meta, StoryObj} from '@storybook/react'; +import thwMottoData from "../data/ThwMottoData"; +import ThwPositivePsychology from "../../components/transform-hw/ThwPositivePsychology"; +import thwPositivePsychologyData from "../data/ThwPositivePsychologyData"; + + +const meta: Meta = { + title:"THW/Section/THW About Us Section", + component: ThwPositivePsychology, +}; + +export default meta; +type Story = StoryObj; + + +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/react/api/csf + * to learn how to use render functions. + */ + +export const Primary: Story = { + args:{ + sectionData:thwPositivePsychologyData + }, + render: ({sectionData}) => , +}; diff --git a/src/stories/transform/ThwContactUsSection.stories.tsx b/src/stories/transform/ThwContactUsSection.stories.tsx new file mode 100644 index 00000000..baf6da57 --- /dev/null +++ b/src/stories/transform/ThwContactUsSection.stories.tsx @@ -0,0 +1,39 @@ +import type {Meta, StoryObj} from '@storybook/react'; +import ThwServicesSection from "../../components/transform-hw/ThwServicesSection"; +import thwServicesSectionData from "../data/ThwServicesSectionData"; +import HomePageResumeData from "../data/HomePageData"; +import PageProvider from "../../components/page-context/PageProvider"; +import AmenityProvider from "../../components/amenity-context/AmenityProvider"; +import ThwHomePageData from "../data/ThwHomePageData"; +import ThwWhyChooseUsSection from "../../components/transform-hw/ThwWhyChooseUsSection"; +import thwWhyChooseUsData from "../data/ThwWhyChooseUsData"; +import ThwContactUsSection from "../../components/transform-hw/ThwContactUsSection"; +import thwContactUsData from "../data/ThwContactUsData"; + + +const meta: Meta = { + title: "THW/Section/THW Contact Us Section", + component: ThwContactUsSection, +}; + +export default meta; +type Story = StoryObj; + + +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/react/api/csf + * to learn how to use render functions. + */ + +export const Primary: Story = { + args: { + sectionData: thwContactUsData + }, + render: ({sectionData}) => + + + + , +}; diff --git a/src/stories/transform/ThwHeroSection.stories.tsx b/src/stories/transform/ThwHeroSection.stories.tsx new file mode 100644 index 00000000..02a08e16 --- /dev/null +++ b/src/stories/transform/ThwHeroSection.stories.tsx @@ -0,0 +1,23 @@ +import type {Meta, StoryObj} from '@storybook/react'; +import ThwHeroContentSection from "../../components/transform-hw/ThwHeroContentSection"; +import ThwHeroContentSectionData from "../data/ThwHeroContentSectionData"; + + +const meta: Meta = { + title:"THW/Section/THW Hero Section", + component: ThwHeroContentSection, +}; + +export default meta; +type Story = StoryObj; + + +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/react/api/csf + * to learn how to use render functions. + */ + +export const Primary: Story = { + render: () => , +}; diff --git a/src/stories/transform/ThwMottoSection.stories.tsx b/src/stories/transform/ThwMottoSection.stories.tsx new file mode 100644 index 00000000..68a5bcbd --- /dev/null +++ b/src/stories/transform/ThwMottoSection.stories.tsx @@ -0,0 +1,27 @@ +import type {Meta, StoryObj} from '@storybook/react'; +import ThwMottoSection from "../../components/transform-hw/ThwMottoSection"; +import homePageResume from "../data/HomePageData"; +import thwMottoData from "../data/ThwMottoData"; + + +const meta: Meta = { + title:"THW/Section/THW Motto Section", + component: ThwMottoSection, +}; + +export default meta; +type Story = StoryObj; + + +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/react/api/csf + * to learn how to use render functions. + */ + +export const Primary: Story = { + args:{ + sectionData:thwMottoData + }, + render: ({sectionData}) => , +}; diff --git a/src/stories/transform/ThwServicesSection.stories.tsx b/src/stories/transform/ThwServicesSection.stories.tsx new file mode 100644 index 00000000..e71dd6f2 --- /dev/null +++ b/src/stories/transform/ThwServicesSection.stories.tsx @@ -0,0 +1,35 @@ +import type {Meta, StoryObj} from '@storybook/react'; +import ThwServicesSection from "../../components/transform-hw/ThwServicesSection"; +import thwServicesSectionData from "../data/ThwServicesSectionData"; +import HomePageResumeData from "../data/HomePageData"; +import PageProvider from "../../components/page-context/PageProvider"; +import AmenityProvider from "../../components/amenity-context/AmenityProvider"; +import ThwHomePageData from "../data/ThwHomePageData"; + + +const meta: Meta = { + title: "THW/Section/THW Services Section", + component: ThwServicesSection, +}; + +export default meta; +type Story = StoryObj; + + +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/react/api/csf + * to learn how to use render functions. + */ + +export const Primary: Story = { + args: { + sectionData: thwServicesSectionData + }, + render: ({sectionData}) => + + + + , +}; diff --git a/src/stories/transform/ThwWhyChooseUsSection.stories.tsx b/src/stories/transform/ThwWhyChooseUsSection.stories.tsx new file mode 100644 index 00000000..74136f8a --- /dev/null +++ b/src/stories/transform/ThwWhyChooseUsSection.stories.tsx @@ -0,0 +1,37 @@ +import type {Meta, StoryObj} from '@storybook/react'; +import ThwServicesSection from "../../components/transform-hw/ThwServicesSection"; +import thwServicesSectionData from "../data/ThwServicesSectionData"; +import HomePageResumeData from "../data/HomePageData"; +import PageProvider from "../../components/page-context/PageProvider"; +import AmenityProvider from "../../components/amenity-context/AmenityProvider"; +import ThwHomePageData from "../data/ThwHomePageData"; +import ThwWhyChooseUsSection from "../../components/transform-hw/ThwWhyChooseUsSection"; +import thwWhyChooseUsData from "../data/ThwWhyChooseUsData"; + + +const meta: Meta = { + title: "THW/Section/THW Why Choose Us Section", + component: ThwWhyChooseUsSection, +}; + +export default meta; +type Story = StoryObj; + + +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/react/api/csf + * to learn how to use render functions. + */ + +export const Primary: Story = { + args: { + sectionData: thwWhyChooseUsData + }, + render: ({sectionData}) => + + + + , +}; diff --git a/src/stories/web-dev-company/WebDevHeroSection.stories.tsx b/src/stories/web-dev-company/WebDevHeroSection.stories.tsx index f8a95152..50fdc54a 100644 --- a/src/stories/web-dev-company/WebDevHeroSection.stories.tsx +++ b/src/stories/web-dev-company/WebDevHeroSection.stories.tsx @@ -4,6 +4,7 @@ import {ButtonGroupMemberEnum} from "../../components/loading-button/ButtonGroup import {Grid} from "@material-ui/core"; import WebDevHeroContentSection from "../../components/web-dev-site/WebDevHeroContentSection"; import WebDevHeroSectionData from "../data/WebDevHeroContentSectionData"; +import ThwHeroContentSection from "../../components/transform-hw/ThwHeroContentSection"; const meta: Meta = { diff --git a/src/theme/TransformHWTheme.ts b/src/theme/TransformHWTheme.ts new file mode 100644 index 00000000..eb34e304 --- /dev/null +++ b/src/theme/TransformHWTheme.ts @@ -0,0 +1,388 @@ +import {createTheme} from '@material-ui/core' +// import GrotescoLight from '../common/fonts/Grotesco/Grotesco-Web-Font/Grotesco-Light.ttf' +// import Feixen from './common/fonts/Studio Feixen Sans Writer/Web/StudioFeixenSansWriter-Regular.ttf' +import Poppins from './common/fonts/Poppins/Poppins-Medium.ttf' +import MontserratBold from './common/fonts/Montserrat/Montserrat-Bold.ttf' +import MontserratBold2 from './common/fonts/Montserrat/Montserrat-Bold.otf' +// import PoppinsBold from './common/fonts/Poppins/Poppins-Bold.ttf' +import PoppinsXBold from './common/fonts/Poppins/Poppins-ExtraBold.ttf' +// import PlexSans from '../common/fonts/IBM Plex/OpenType/IBM-Plex-Sans/IBMPlexSans-Regular.otf' + +type FontFace = { + fontDisplay?: any + fontFamily?: any + fontStyle?: any + fontWeight?: number + src?: string +} + +// export const grotesco: FontFace = { +// fontFamily: 'Grotesco', +// fontStyle: 'normal', +// fontDisplay: 'swap', // uses the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT. +// fontWeight: 400, +// src: ` +// local('Grotesco'), +// url(${Grotesco}) format('truetype') +// ` +// } + +// const grotescoLight: FontFace = { +// fontFamily: 'Grotesco Light', +// fontStyle: 'normal', +// fontDisplay: 'swap', // uses the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT. +// fontWeight: 400, +// src: ` +// local('Grotesco Light'), +// url(${GrotescoLight}) format('truetype') +// ` +// } + +// const feixen: FontFace = { +// fontFamily: 'Feixen', +// fontStyle: 'normal', +// fontDisplay: 'swap', // uses the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT. +// fontWeight: 400, +// src: ` +// local('Feixen'), +// url(${Feixen}) format('opentype') +// ` +// } + +const poppins: FontFace = { + fontFamily: 'Poppins', + fontStyle: 'normal', + fontDisplay: 'swap', // uses the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT. + fontWeight: 400, + src: ` + local('Poppins'), + url(${Poppins}) format('opentype') + ` +} + +export const montserratBold: FontFace = { + fontFamily: 'Montserrat', + fontStyle: 'bold', + fontDisplay: 'swap', // uses the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT. + fontWeight: 700, + src: ` + local('Montserrat'), + url(${MontserratBold}) format('truetype'), + url(${MontserratBold2}) format('opentype'), + 'sans-serif' + ` +} + +// const poppinsBold: FontFace = { +// fontFamily: 'Poppins', +// fontStyle: 'normal', +// fontDisplay: 'swap', // uses the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT. +// fontWeight: 700, +// src: ` +// local('Poppins'), +// url(${PoppinsBold}) format('opentype') +// ` +// } +export const poppinsXBold: FontFace = { + fontFamily: 'Poppins', + fontStyle: 'normal', + fontDisplay: 'swap', // uses the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT. + fontWeight: 900, + src: ` + local('Poppins'), + url(${PoppinsXBold}) format('opentype') + ` +} + +// const plexSans: FontFace = { +// fontFamily: 'Plex Sans', +// fontStyle: 'normal', +// fontDisplay: 'swap', // uses the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT. +// fontWeight: 400, +// src: ` +// local('Plex Sans'), +// url(${PlexSans}) format('opentype') +// ` +// } + +const fonts = ['Poppins', 'Montserrat', 'sans-serif'].join(',') + +// New Registration flow colors +export const PINK = '#FFA9E7' + +// Marketplace colors + +export enum COLORS { + DARKBLUE = 'rgba(0,0,53,1)', + TRANSPARENT_DARKBLUE = 'rgba(0,0,53,.85)', + BLUE = 'rgba(16, 43, 136, 1)', + DARK_GRAY = '#A8A9AC', + GRAY = 'rgba(207, 207, 207, 1)', + LIGHT_GRAY = '#E3E3E3', + TRANSPARENTWHITE = 'rgba(255,255,255,0.75)' +} + +const TransformHWTheme = createTheme({ + breakpoints: { + values: { + xs: 0, + sm: 640, + md: 980, + lg: 1160, + xl: 1320, + } + }, +// @ts-ignore + palette: { + background: { + default: COLORS.DARKBLUE, + paper: COLORS.LIGHT_GRAY + }, + primary: { + main: COLORS.GRAY, + }, + secondary: { + main: COLORS.BLUE, + }, + error: { + main: '#840E0E', + light: '#D79393', + dark: '#640E0E' + }, + success: { + main: '#27AE60', + light: '#93D7B0', + dark: '#0E8433' + }, + warning: { + main: '#E2AB1F', + light: '#F1D58F', + dark: '#CF800A' + }, + text: { + primary: COLORS.DARKBLUE, + secondary: COLORS.LIGHT_GRAY, + disabled: COLORS.LIGHT_GRAY + } + }, + typography: { + fontFamily: fonts, + h1: { + // Title1 + fontSize: '66px', + fontStyle: 'normal', + fontWeight: "bold", + lineHeight: 1.3, + letterSpacing: '-0.03em' + }, + h2: { + // Title2 + fontSize: '53px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.25, + letterSpacing: '-0.03em' + }, + h3: { + // Title3 + fontSize: '44px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.4, + letterSpacing: '-0.03em' + }, + h4: { + fontWeight: 'bold', + fontStyle: 'normal', + fontSize: '34px', + lineHeight: 1.5 + }, + h6: { + fontWeight: 'bold', + fontStyle: 'normal', + fontSize: '20px', + lineHeight: 1.5 + }, + body1: { + // Body + fontSize: '18px', + fontStyle: 'normal', + fontWeight: 350, + lineHeight: 1.5, + letterSpacing: '-0.03em' + }, + body2: { + // Large + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: '-0.03em' + }, + button: { + // Button + fontSize: '19px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1, + letterSpacing: '-0.03em', + textTransform: 'none' + }, + subtitle1: { + // Small + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 750, + lineHeight: 1.45, + letterSpacing: '-0.03em' + }, + subtitle2: { + // Micro + fontSize: '11px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.45, + letterSpacing: '-0.03em' + } + }, + overrides: { + MuiCssBaseline: { + '@global': { + '@font-face': [poppins, poppinsXBold] + }, + }, + MuiInputBase: { + root: { + color: "#FAFAFA", + "&:focus": { + borderBottom: 0 + } + }, + input: { + // borderBottom: "4px solid " + COLORS.MAIN, + "& :before": { + // borderBottom: "1px solid "+ COLORS.MAIN, + } + } + }, + MuiTooltip: { + tooltip: { + backgroundColor: 'rgba(16, 43, 136, .9)' + } + }, + MuiSnackbarContent:{ + root:{ + marginTop: "100px", + border: "3px solid white", + backgroundColor: 'rgba(16, 43, 136, .95) !important' + } + }, + MuiFilledInput: { + root: { + backgroundColor: "rgba(0,0,0,.3)", + // borderBottom: "1px solid "+ COLORS.MAIN, + "& .Mui-focused": { + borderBottomWidth: '0px solid black' + } + }, + // notchedOutline: { + // "& :after":{ + // borderColor: "red" + // } + // // "& :after": { + // // borderBottom: "2px solid red", + // // borderColor: COLORS.MAIN, + // // } + // }, + }, + MuiInputLabel: { + root: { + // color:"black", + } + }, + MuiButton: { + root: { + // color: '#FFFFFF', + // height: '35px', + // padding: '8px 16px 8px 16px', + borderRadius: '5px', + paddingTop: "16px", + paddingBottom: "16px" + }, + contained: { + boxShadow: "none", + }, + containedPrimary: { + border: '1px solid white', + backgroundColor: "rgba(207, 207, 207, .8)", + // color: '#FCE3CC', + // backgroundColor: '#FF4122', + // '&:hover': { + // backgroundColor: '#BD1A00', + // color: '#FCE3CC' + // }, + '&$disabled': { + backgroundColor: '#79582d', + color: '#969284' + }, + // '&:focus': { + // color: '#FCE3CC', + // backgroundColor: '#FF4122' + // } + }, + containedSecondary: { + border: '1px solid whitesmoke', + // color: '#FEF1E6', + backgroundColor: 'rgba(16, 43, 136, .7)', + // '&:hover': { + // backgroundColor: '#2412AE', + // color: '#FCE3CC' + // }, + '&$disabled': { + color: 'rgba(207, 207, 207, .5)', + backgroundColor: 'rgba(16, 43, 136, .5)' + }, + // '&:focus': { + // color: '#FCE3CC', + // backgroundColor: '#4C2FCD' + // } + }, + outlinedPrimary: { + borderWidth: '3px', + paddingTop: "16px", + paddingBottom: "16px", + paddingLeft: "64px", + paddingRight: "64px" + // color: '#FF4122', + // borderColor: '#FF4122', + // '&:hover': { + // backgroundColor: '#FF4122', + // color: '#FCE3CC' + // }, + // '&:disabled': { + // borderColor: '#FFA091', + // color: '#FFA091' + // }, + // '&:focus': { + // backgroundColor: 'transparent', + // borderColor: '#FF4122', + // color: '#FF4122' + // } + }, + outlinedSecondary: { + borderWidth: '3px', + paddingTop: "16px", + paddingBottom: "16px", + paddingLeft: "64px", + paddingRight: "64px", + } + }, + MuiCircularProgress: { + // colorPrimary: { + // color: '#A697E6' + // } + } + } +}) + +export default TransformHWTheme diff --git a/src/utils/dateUtils.ts b/src/utils/dateUtils.ts index 22c78c7c..3b05acd1 100644 --- a/src/utils/dateUtils.ts +++ b/src/utils/dateUtils.ts @@ -3,7 +3,7 @@ const YearMonth = (date?:Date) =>{ return new Date(date).toLocaleDateString('en-us', { year:"numeric", month:"short"}) } -const MonthYear = (date?:Date) =>{ +const MonthYear = (date?: Date | string | undefined) =>{ if(!date) return "" return new Date(date).toLocaleDateString('en-us', { month:"short", year:"numeric"}) } diff --git a/src/utils/groqQueries.ts b/src/utils/groqQueries.ts index 037b3fb7..8708c1e1 100644 --- a/src/utils/groqQueries.ts +++ b/src/utils/groqQueries.ts @@ -96,6 +96,7 @@ const HOMEPAGE = `_type, "servicesList": servicesList[]->{ ${SERVICE} }, + "prosList": prosList[]->, "serviceAmenities": serviceAmenities[]->, "skillsets": skillsets[]{ ..., diff --git a/src/utils/imagePlaceholderClient.ts b/src/utils/imagePlaceholderClient.ts new file mode 100644 index 00000000..041f6727 --- /dev/null +++ b/src/utils/imagePlaceholderClient.ts @@ -0,0 +1,38 @@ +import {SanityImageAsset} from "../components/BlockContentTypes"; +import {urlFor} from "../components/block-content-ui/static-pages/cmsStaticPagesClient"; + +const PLACEHOLDER_URL = "https://placehold.co/" + +const placeholderOrImage = (imageSrc?: SanityImageAsset, placeHolderWidth?: number, placeHolderHeight?: number, text?: string) => { + let theUrl = "" + + if (imageSrc) { + theUrl = urlFor(imageSrc).url() ?? "" + } else { + theUrl = getPlaceholderImageUrl(placeHolderWidth, placeHolderHeight, text) + } + + return theUrl +} +const getPlaceholderImageUrl = (width?: number, height?: number, text?: string) => { + let theUrl = PLACEHOLDER_URL + if (width) { + if (height) { + theUrl += `${width}x${height}` + } else { + theUrl += `${height}x${height}` + } + } else { + theUrl += `${height}x${height}` + } + + if (text) { + theUrl += `?text=${text.replace(" ", "+")}` + } + + return theUrl +} +export default { + getPlaceholderImageUrl, + placeholderOrImage +} \ No newline at end of file