diff --git a/docs/package.json b/docs/package.json index d772d7c..a6fcc0b 100644 --- a/docs/package.json +++ b/docs/package.json @@ -23,6 +23,7 @@ "@vanilla-extract/webpack-plugin": "^2.1.10", "clsx": "^1.1.1", "docusaurus-plugin-vanilla-extract": "^1.0.1", + "framer-motion": "6.2.4", "polished": "^4.1.3", "prism-react-renderer": "^1.3.1", "react": "^17.0.2", diff --git a/docs/src/components/landing-page/icons/Close.tsx b/docs/src/components/landing-page/icons/Close.tsx new file mode 100644 index 0000000..c66f7b7 --- /dev/null +++ b/docs/src/components/landing-page/icons/Close.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import { Icon } from "@hover-design/react"; +import { IIconProps } from "./icon.types"; + +export const Close = ({ + height = 24, + width = 24, + color = "currentColor", + ...props +}: IIconProps) => { + return ( + + + + + + ); +}; diff --git a/docs/src/components/landing-page/icons/Hamburger.tsx b/docs/src/components/landing-page/icons/Hamburger.tsx new file mode 100644 index 0000000..3657f65 --- /dev/null +++ b/docs/src/components/landing-page/icons/Hamburger.tsx @@ -0,0 +1,31 @@ +import { Icon } from "@hover-design/react"; +import React from "react"; +import { IIconProps } from "./icon.types"; + +const Hamburger = ({ + height = 24, + width = 24, + color = "currentColor", + ...props +}: IIconProps) => { + return ( + + + + + + ); +}; + +export { Hamburger }; diff --git a/docs/src/components/landing-page/icons/icon.types.ts b/docs/src/components/landing-page/icons/icon.types.ts new file mode 100644 index 0000000..f8867c6 --- /dev/null +++ b/docs/src/components/landing-page/icons/icon.types.ts @@ -0,0 +1,6 @@ +export interface IIconProps { + height?: number; + width?: number; + color?: string; + className?: string; +} diff --git a/docs/src/components/landing-page/layouts/landing-page-layout/LandingPageLayout.tsx b/docs/src/components/landing-page/layouts/landing-page-layout/LandingPageLayout.tsx new file mode 100644 index 0000000..fb62a72 --- /dev/null +++ b/docs/src/components/landing-page/layouts/landing-page-layout/LandingPageLayout.tsx @@ -0,0 +1,13 @@ +import { primaryThemeClassName } from "@site/src/styles"; +import React from "react"; +import { landingPageLayoutStyles } from "./landing-page-layout.styles.css"; + +const LandingPageLayout = ({ children }) => { + return ( +
+
{children}
+
+ ); +}; + +export { LandingPageLayout }; diff --git a/docs/src/components/landing-page/layouts/landing-page-layout/landing-page-layout.styles.css.ts b/docs/src/components/landing-page/layouts/landing-page-layout/landing-page-layout.styles.css.ts new file mode 100644 index 0000000..bc9ec36 --- /dev/null +++ b/docs/src/components/landing-page/layouts/landing-page-layout/landing-page-layout.styles.css.ts @@ -0,0 +1,7 @@ +import { themeVars } from "@site/src/styles"; +import { style } from "@vanilla-extract/css"; + +export const landingPageLayoutStyles = style({ + backgroundColor: themeVars.colors.baseBackground, + color: themeVars.colors.white +}); diff --git a/docs/src/components/landing-page/navbar/MobileSidebar.tsx b/docs/src/components/landing-page/navbar/MobileSidebar.tsx new file mode 100644 index 0000000..89c7b99 --- /dev/null +++ b/docs/src/components/landing-page/navbar/MobileSidebar.tsx @@ -0,0 +1,66 @@ +import React, { useState } from "react"; +import { AnimatePresence, motion } from "framer-motion"; +import { + mobileSidebarIconStyles, + mobileSideBarLinkStyles, + mobileSidebarStyles +} from "./mobile-sidebar.styles.css"; +import { Hamburger } from "../icons/Hamburger"; +import { Flex, UnstyledButton } from "@hover-design/react"; +import { navbarStyles, unstyledLinkStyles } from "./navbar.styles.css"; +import HoverLogo from "@site/static/img/hover_logo_letters.svg"; +import { Close } from "../icons/Close"; +import { navbarLinks } from "./navbar.data"; + +const MobileSidebar = () => { + const [isSideBarActive, setIsSideBarActive] = useState(false); + return ( +
+ { + setIsSideBarActive(true); + }} + > + + + {/*Note: Issue with React types of 17 and 18 clashing, need to wait till Docsaurus is moved to 18 TODO */} + {/*@ts-ignore */} + + {isSideBarActive && ( + + + + + + + { + setIsSideBarActive(false); + }} + > + + + + + {navbarLinks.map((link) => ( +

+ + {link.label} + +

+ ))} + + + + )} + +
+ ); +}; + +export { MobileSidebar }; diff --git a/docs/src/components/landing-page/navbar/Navbar.tsx b/docs/src/components/landing-page/navbar/Navbar.tsx new file mode 100644 index 0000000..5a4a173 --- /dev/null +++ b/docs/src/components/landing-page/navbar/Navbar.tsx @@ -0,0 +1,45 @@ +import React from "react"; +import { + hideLinkOnMobileStyle, + navbarLinkStyles, + navbarStyles, + unstyledLinkStyles +} from "./navbar.styles.css"; +import HoverLogo from "@site/static/img/hover_logo_letters.svg"; +import GithubLogo from "@site/static/logos/github.svg"; +import { Flex } from "@hover-design/react"; +import { navbarLinks } from "./navbar.data"; +import { MobileSidebar } from "./MobileSidebar"; + +const Navbar = () => { + return ( + + ); +}; + +export { Navbar }; diff --git a/docs/src/components/landing-page/navbar/mobile-sidebar.styles.css.ts b/docs/src/components/landing-page/navbar/mobile-sidebar.styles.css.ts new file mode 100644 index 0000000..7bf4df1 --- /dev/null +++ b/docs/src/components/landing-page/navbar/mobile-sidebar.styles.css.ts @@ -0,0 +1,33 @@ +import { themeVars } from "@site/src/styles"; +import { breakpointMediaQueries } from "@site/src/styles/constants/breakpoints/breakpoints"; +import { style } from "@vanilla-extract/css"; + +export const mobileSidebarStyles = style({ + display: "block", + position: "fixed", + top: 0, + left: 0, + width: "100vw", + height: "100vh", + backgroundColor: themeVars.colors.transparent.black[20], + backdropFilter: " blur(8.34545px)", + + "@media": { + [breakpointMediaQueries.tablet]: { + display: "none" + } + } +}); + +export const mobileSidebarIconStyles = style({ + display: "block", + "@media": { + [breakpointMediaQueries.tablet]: { + display: "none" + } + } +}); + +export const mobileSideBarLinkStyles = style({ + textAlign: "center" +}); diff --git a/docs/src/components/landing-page/navbar/navbar.data.ts b/docs/src/components/landing-page/navbar/navbar.data.ts new file mode 100644 index 0000000..2a7e310 --- /dev/null +++ b/docs/src/components/landing-page/navbar/navbar.data.ts @@ -0,0 +1,14 @@ +export const navbarLinks = [ + { + label: "Docs", + href: "/docs/intro" + }, + { + label: "Components", + href: "/docs/category/components" + }, + { + label: "Wiki", + href: "/docs/wiki/home" + } +]; diff --git a/docs/src/components/landing-page/navbar/navbar.styles.css.ts b/docs/src/components/landing-page/navbar/navbar.styles.css.ts new file mode 100644 index 0000000..caf7a33 --- /dev/null +++ b/docs/src/components/landing-page/navbar/navbar.styles.css.ts @@ -0,0 +1,52 @@ +import { themeVars } from "@site/src/styles"; +import { breakpointMediaQueries } from "@site/src/styles/constants/breakpoints/breakpoints"; +import { style } from "@vanilla-extract/css"; + +export const navbarStyles = style({ + padding: "12px 20px 12px 20px", + "@media": { + [breakpointMediaQueries.desktop]: { + padding: "20px 80px 20px 80px" + } + } +}); + +export const navbarLinkStyles = style({ + color: themeVars.colors.white, + textDecoration: "none", + fontWeight: 500, + lineHeight: "19px", + + ":hover": { + color: themeVars.colors.white + }, + ":link": { + color: themeVars.colors.white + }, + ":visited": { + color: themeVars.colors.white + } +}); + +export const hideLinkOnMobileStyle = style({ + display: "none", + "@media": { + [breakpointMediaQueries.tablet]: { + display: "inline" + } + } +}); +export const unstyledLinkStyles = style({ + textDecoration: "none", + color: "inherit", + lineHeight: 0, + ":hover": { + color: "inherit" + }, + ":link": { + color: "inherit" + }, + ":visited": { + color: "inherit" + } +}); diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index 33bface..06e668e 100644 --- a/docs/src/pages/index.tsx +++ b/docs/src/pages/index.tsx @@ -1,11 +1,15 @@ import React from "react"; import { HoverProvider } from "@hover-design/react"; import { theme } from "../styles/theme/theme"; -import { primaryThemeClassName } from "../styles"; + +import { LandingPageLayout } from "../components/landing-page/layouts/landing-page-layout/LandingPageLayout"; +import { Navbar } from "../components/landing-page/navbar/Navbar"; const HomePage = () => { return ( -
Hello World
+ + + ); }; diff --git a/docs/src/styles/constants/breakpoints/breakpoints.ts b/docs/src/styles/constants/breakpoints/breakpoints.ts index d84823e..6042969 100644 --- a/docs/src/styles/constants/breakpoints/breakpoints.ts +++ b/docs/src/styles/constants/breakpoints/breakpoints.ts @@ -5,7 +5,7 @@ export const breakpoints = { }; export const breakpointMediaQueries = { - desktop: `(min-width: ${breakpoints.desktop}px)`, - tablet: `(min-width: ${breakpoints.tablet}px)`, - mobile: `(min-width: ${breakpoints.mobile}px)` + desktop: `screen and (min-width: ${breakpoints.desktop}px)`, + tablet: `screen and (min-width: ${breakpoints.tablet}px)`, + mobile: `screen and (min-width: ${breakpoints.mobile}px)` }; diff --git a/docs/src/styles/constants/colors/colors.ts b/docs/src/styles/constants/colors/colors.ts index 9744689..49ce145 100644 --- a/docs/src/styles/constants/colors/colors.ts +++ b/docs/src/styles/constants/colors/colors.ts @@ -74,5 +74,10 @@ export const colors: IColors = { 80: "#393939", 90: "#262626", 100: "#161616" + }, + white: "#ffffff", + baseBackground: "#0A0C12", + transparent: { + black: { 20: " #1d1d1d66" } } }; diff --git a/docs/src/styles/constants/colors/colors.types.ts b/docs/src/styles/constants/colors/colors.types.ts index ade9834..d4857ea 100644 --- a/docs/src/styles/constants/colors/colors.types.ts +++ b/docs/src/styles/constants/colors/colors.types.ts @@ -18,4 +18,11 @@ export interface IColors { green: IColorWeights; yellow: IColorWeights; gray: IColorWeights; + white: string; + baseBackground: string; + transparent: { + black: { + 20: IColorWeights[20]; + }; + }; } diff --git a/docs/static/img/hover_logo_letters.svg b/docs/static/img/hover_logo_letters.svg index 17a1d89..939cbf2 100644 --- a/docs/static/img/hover_logo_letters.svg +++ b/docs/static/img/hover_logo_letters.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/docs/static/img/hover_logo_letters_white.svg b/docs/static/img/hover_logo_letters_white.svg index 48ed89b..b73a7c4 100644 --- a/docs/static/img/hover_logo_letters_white.svg +++ b/docs/static/img/hover_logo_letters_white.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/docs/static/img/logo.svg b/docs/static/img/logo.svg index 3fb6edc..565fe64 100644 --- a/docs/static/img/logo.svg +++ b/docs/static/img/logo.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/docs/static/logos/github.svg b/docs/static/logos/github.svg new file mode 100644 index 0000000..272305d --- /dev/null +++ b/docs/static/logos/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3810c7e..5f64eec 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23,6 +23,7 @@ importers: '@vanilla-extract/webpack-plugin': ^2.1.10 clsx: ^1.1.1 docusaurus-plugin-vanilla-extract: ^1.0.1 + framer-motion: 6.2.4 polished: ^4.1.3 prism-react-renderer: ^1.3.1 react: ^17.0.2 @@ -38,6 +39,7 @@ importers: '@vanilla-extract/webpack-plugin': 2.1.11 clsx: 1.2.1 docusaurus-plugin-vanilla-extract: 1.0.2_xfxawrp45gq6jrdq44efqhhyg4 + framer-motion: 6.2.4_sfoxds7t5ydpegc3knd667wn6m polished: 4.2.2 prism-react-renderer: 1.3.5_react@17.0.2 react: 17.0.2 @@ -2657,6 +2659,19 @@ packages: resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==} dev: false + /@emotion/is-prop-valid/0.8.8: + resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==} + requiresBuild: true + dependencies: + '@emotion/memoize': 0.7.4 + dev: false + optional: true + + /@emotion/memoize/0.7.4: + resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==} + dev: false + optional: true + /@esbuild/android-arm/0.16.16: resolution: {integrity: sha512-BUuWMlt4WSXod1HSl7aGK8fJOsi+Tab/M0IDK1V1/GstzoOpqc/v3DqmN8MkuapPKQ9Br1WtLAN4uEgWR8x64A==} engines: {node: '>=12'} @@ -6396,6 +6411,29 @@ packages: resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==} dev: false + /framer-motion/6.2.4_sfoxds7t5ydpegc3knd667wn6m: + resolution: {integrity: sha512-1UfnSG4c4CefKft6QMYGx8AWt3TtaFoR/Ax4dkuDDD5BDDeIuUm7gesmJrF8GzxeX/i6fMm8+MEdPngUyPVdLA==} + peerDependencies: + react: '>=16.8 || ^17.0.0' + react-dom: '>=16.8 || ^17.0.0' + dependencies: + framesync: 6.0.1 + hey-listen: 1.0.8 + popmotion: 11.0.3 + react: 17.0.2 + react-dom: 17.0.2_react@17.0.2 + style-value-types: 5.0.0 + tslib: 2.4.0 + optionalDependencies: + '@emotion/is-prop-valid': 0.8.8 + dev: false + + /framesync/6.0.1: + resolution: {integrity: sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==} + dependencies: + tslib: 2.4.0 + dev: false + /fresh/0.5.2: resolution: {integrity: sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=} engines: {node: '>= 0.6'} @@ -6778,6 +6816,10 @@ packages: hasBin: true dev: false + /hey-listen/1.0.8: + resolution: {integrity: sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==} + dev: false + /history/4.10.1: resolution: {integrity: sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==} dependencies: @@ -8255,6 +8297,15 @@ packages: '@babel/runtime': 7.18.9 dev: false + /popmotion/11.0.3: + resolution: {integrity: sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==} + dependencies: + framesync: 6.0.1 + hey-listen: 1.0.8 + style-value-types: 5.0.0 + tslib: 2.4.0 + dev: false + /postcss-calc/8.2.4_postcss@8.4.21: resolution: {integrity: sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==} peerDependencies: @@ -9900,6 +9951,13 @@ packages: inline-style-parser: 0.1.1 dev: false + /style-value-types/5.0.0: + resolution: {integrity: sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==} + dependencies: + hey-listen: 1.0.8 + tslib: 2.4.0 + dev: false + /stylehacks/5.1.0_postcss@8.4.21: resolution: {integrity: sha512-SzLmvHQTrIWfSgljkQCw2++C9+Ne91d/6Sp92I8c5uHTcy/PgeHamwITIbBW9wnFTY/3ZfSXR9HIL6Ikqmcu6Q==} engines: {node: ^10 || ^12 || >=14.0}