From 9b1ac73e89b9d9440914bb5772f8dc19aa793be7 Mon Sep 17 00:00:00 2001 From: paco <34928425+pacocoursey@users.noreply.github.com> Date: Thu, 8 Oct 2020 12:26:37 -0600 Subject: [PATCH 01/19] Split out tailwind css into multiple files for reload perf --- assets/global.css | 4 ---- assets/tailwind.css | 2 ++ assets/utils.css | 1 + pages/_app.tsx | 2 ++ 4 files changed, 5 insertions(+), 4 deletions(-) create mode 100644 assets/tailwind.css create mode 100644 assets/utils.css diff --git a/assets/global.css b/assets/global.css index f3579ae09..507d3fd82 100644 --- a/assets/global.css +++ b/assets/global.css @@ -1,6 +1,4 @@ @import './font.css'; -@tailwind base; -@tailwind components; :root { /* Spacing variables */ @@ -190,5 +188,3 @@ body { a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } - -@tailwind utilities; diff --git a/assets/tailwind.css b/assets/tailwind.css new file mode 100644 index 000000000..605a9cef0 --- /dev/null +++ b/assets/tailwind.css @@ -0,0 +1,2 @@ +@tailwind base; +@tailwind components; diff --git a/assets/utils.css b/assets/utils.css new file mode 100644 index 000000000..65dd5f63a --- /dev/null +++ b/assets/utils.css @@ -0,0 +1 @@ +@tailwind utilities; diff --git a/pages/_app.tsx b/pages/_app.tsx index c84409786..618847986 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,6 +1,8 @@ import { FC } from 'react' import type { AppProps } from 'next/app' import '@assets/global.css' +import '@assets/tailwind.css' +import '@assets/utils.css' const Noop: FC = ({ children }) => <>{children} From 5b597c6a2a39886c1c3746d825b902fe77d1d84b Mon Sep 17 00:00:00 2001 From: paco <34928425+pacocoursey@users.noreply.github.com> Date: Thu, 8 Oct 2020 12:26:49 -0600 Subject: [PATCH 02/19] Hide the banner on mobile --- components/core/Featurebar/Featurebar.module.css | 12 ------------ components/core/Featurebar/Featurebar.tsx | 9 ++++++--- 2 files changed, 6 insertions(+), 15 deletions(-) diff --git a/components/core/Featurebar/Featurebar.module.css b/components/core/Featurebar/Featurebar.module.css index 54d8108bf..13214e475 100644 --- a/components/core/Featurebar/Featurebar.module.css +++ b/components/core/Featurebar/Featurebar.module.css @@ -1,11 +1,3 @@ -.root { - @apply py-4 px-6 bg-black text-white flex flex-row justify-center items-center; -} - -.title { - @apply text-white font-medium; -} - .separator { @apply mx-3 bg-white; width: 1px; @@ -15,7 +7,3 @@ .separator:before { content: ''; } - -.description { - @apply text-white font-medium; -} diff --git a/components/core/Featurebar/Featurebar.tsx b/components/core/Featurebar/Featurebar.tsx index 7fa882d8a..d3772ff49 100644 --- a/components/core/Featurebar/Featurebar.tsx +++ b/components/core/Featurebar/Featurebar.tsx @@ -9,12 +9,15 @@ interface Props { } const Featurebar: FC = ({ title, description, className }) => { - const rootClassName = cn(s.root, className) + const rootClassName = cn( + 'hidden py-4 px-6 bg-black text-white md:flex flex-row justify-center items-center;', + className + ) return (
- {title} + {title} - {description} + {description}
) } From 791e8cf18f048e7ddde7c688602fda5fc10de823 Mon Sep 17 00:00:00 2001 From: paco <34928425+pacocoursey@users.noreply.github.com> Date: Thu, 8 Oct 2020 12:36:00 -0600 Subject: [PATCH 03/19] Improve page paddings --- components/product/ProductView/ProductView.module.css | 2 +- components/ui/Container/Container.module.css | 5 ----- components/ui/Container/Container.tsx | 3 +-- 3 files changed, 2 insertions(+), 8 deletions(-) delete mode 100644 components/ui/Container/Container.module.css diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css index c3dd37294..d1ee26e09 100644 --- a/components/product/ProductView/ProductView.module.css +++ b/components/product/ProductView/ProductView.module.css @@ -1,5 +1,5 @@ .root { - @apply flex flex-row h-screen py-12; + @apply flex flex-row h-screen py-12 px-6; } .button { diff --git a/components/ui/Container/Container.module.css b/components/ui/Container/Container.module.css deleted file mode 100644 index c16930f28..000000000 --- a/components/ui/Container/Container.module.css +++ /dev/null @@ -1,5 +0,0 @@ -.root { - @apply mx-auto max-w-screen-xl mx-auto px-6 sm:px-4 lg:px-10; - display: inherit; - max-width: 1440px; -} diff --git a/components/ui/Container/Container.tsx b/components/ui/Container/Container.tsx index 8fd100a51..9be8b75ab 100644 --- a/components/ui/Container/Container.tsx +++ b/components/ui/Container/Container.tsx @@ -1,6 +1,5 @@ import cn from 'classnames' import React, { FC } from 'react' -import s from './Container.module.css' interface Props { className?: string @@ -9,7 +8,7 @@ interface Props { } const Container: FC = ({ children, className, el = 'div' }) => { - const rootClassName = cn(s.root, className) + const rootClassName = cn('mx-auto max-w-screen-xl', className) let Component: React.ComponentType Date: Thu, 8 Oct 2020 13:16:30 -0600 Subject: [PATCH 04/19] Improve styling of featurebar/searchbar --- components/core/Featurebar/Featurebar.tsx | 6 +-- components/core/Navbar/Navbar.module.css | 7 ---- components/core/Navbar/Navbar.tsx | 41 +++++++++++++------ .../core/Searchbar/Searchbar.module.css | 10 +---- components/core/Searchbar/Searchbar.tsx | 30 +++++++------- 5 files changed, 47 insertions(+), 47 deletions(-) diff --git a/components/core/Featurebar/Featurebar.tsx b/components/core/Featurebar/Featurebar.tsx index d3772ff49..035d0858c 100644 --- a/components/core/Featurebar/Featurebar.tsx +++ b/components/core/Featurebar/Featurebar.tsx @@ -10,14 +10,14 @@ interface Props { const Featurebar: FC = ({ title, description, className }) => { const rootClassName = cn( - 'hidden py-4 px-6 bg-black text-white md:flex flex-row justify-center items-center;', + 'hidden py-2 px-6 bg-gray-100 text-sm text-gray-600 md:flex flex-row justify-center items-center font-medium', className ) return (
- {title} + {title} - {description} + {description}
) } diff --git a/components/core/Navbar/Navbar.module.css b/components/core/Navbar/Navbar.module.css index 2b1ff03a6..a7e7275b1 100644 --- a/components/core/Navbar/Navbar.module.css +++ b/components/core/Navbar/Navbar.module.css @@ -1,10 +1,3 @@ -.root { -} - -.container { - @apply flex justify-between items-center flex-row px-6 h-20 relative; -} - .link { @apply group text-gray-500 inline-flex items-center text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 cursor-pointer; } diff --git a/components/core/Navbar/Navbar.tsx b/components/core/Navbar/Navbar.tsx index 1447a9f38..f3ba6763d 100644 --- a/components/core/Navbar/Navbar.tsx +++ b/components/core/Navbar/Navbar.tsx @@ -10,25 +10,40 @@ interface Props { } const Navbar: FC = ({ className }) => { - const rootClassName = cn(s.root, className) + const rootClassName = className return (
-
- - - - - -
-
diff --git a/components/core/Searchbar/Searchbar.module.css b/components/core/Searchbar/Searchbar.module.css index fdb4ef62c..55520b1a7 100644 --- a/components/core/Searchbar/Searchbar.module.css +++ b/components/core/Searchbar/Searchbar.module.css @@ -1,13 +1,5 @@ -.root { - @apply px-4 items-center hidden md:flex; -} - -.container { - @apply relative rounded-lg flex flex-row text-sm items-center bg-accent-1; -} - .input { - @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg text-accent-1 placeholder-accent-4; + @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg text-gray-600 placeholder-accent-4; min-width: 300px; } diff --git a/components/core/Searchbar/Searchbar.tsx b/components/core/Searchbar/Searchbar.tsx index ef2d78240..47aeed316 100644 --- a/components/core/Searchbar/Searchbar.tsx +++ b/components/core/Searchbar/Searchbar.tsx @@ -8,22 +8,22 @@ interface Props { } const Searchbar: FC = ({ className }) => { - const rootClassName = cn(s.root, className) return ( -
-
-
- -
- - - -
-
+
+ +
+ + +
) From 7454f920ec06cb23f5c0502035020badd41db7ea Mon Sep 17 00:00:00 2001 From: paco <34928425+pacocoursey@users.noreply.github.com> Date: Thu, 8 Oct 2020 13:31:59 -0600 Subject: [PATCH 05/19] Fix search input overflowing over icon --- components/core/Searchbar/Searchbar.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/core/Searchbar/Searchbar.module.css b/components/core/Searchbar/Searchbar.module.css index 55520b1a7..8a26653b5 100644 --- a/components/core/Searchbar/Searchbar.module.css +++ b/components/core/Searchbar/Searchbar.module.css @@ -1,5 +1,5 @@ .input { - @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg text-gray-600 placeholder-accent-4; + @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg text-gray-600 placeholder-accent-4 pr-10; min-width: 300px; } From fd9ca3f6f94d01c09ce84d3fcf1f256e213c353b Mon Sep 17 00:00:00 2001 From: paco <34928425+pacocoursey@users.noreply.github.com> Date: Thu, 8 Oct 2020 13:41:01 -0600 Subject: [PATCH 06/19] Animation improvements to product cards --- .../ProductCard/ProductCard.module.css | 23 +++++++++++-------- .../product/ProductCard/ProductCard.tsx | 2 +- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index ee28d6d3a..a86de3c57 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -1,11 +1,9 @@ .root { - @apply relative w-full p-6 box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear; + @apply relative w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer; &:hover { - @apply cursor-pointer; - & .squareBg { - @apply inset-12; + @apply scale-75; } & .productTitle, @@ -35,7 +33,7 @@ &:nth-child(6n + 6) .productTitle, &:nth-child(6n + 6) .productPrice, &:nth-child(6n + 6) .wishlistButton { - @apply bg-cyan text-black; + @apply bg-cyan text-white; } } @@ -56,12 +54,19 @@ } } +.squareBg, +.productTitle, +.productPrice, +.wishlistButton { + @apply transition ease-in-out duration-300; +} + .squareBg { - @apply cursor-pointer absolute inset-0 z-0 transition-all duration-75 ease-in-out bg-black; + @apply transform absolute inset-0 z-0 bg-black; } .productTitle { - @apply p-3 h-14 bg-white text-black font-bold text-lg truncate leading-8 inline-flex transition ease-linear; + @apply p-3 h-14 bg-white text-black font-bold text-lg truncate leading-8 inline-flex; max-width: calc(100% - 50px); @screen lg { @@ -70,9 +75,9 @@ } .productPrice { - @apply px-6 py-1 pb-3 bg-white text-black font-semibold inline-block text-sm leading-6 transition ease-linear; + @apply px-3 py-1 pb-2 bg-white text-black font-semibold inline-block text-sm leading-6; } .wishlistButton { - @apply w-14 h-14 flex items-center justify-center bg-white text-black font-semibold inline-block text-sm leading-6 cursor-pointer transition ease-linear; + @apply w-10 h-10 flex items-center justify-center bg-white text-black font-semibold inline-block text-sm leading-6 cursor-pointer; } diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index c5928c115..97acf1daa 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -48,7 +48,7 @@ const ProductCard: FC = ({ className, node: p, variant }) => {
-

{p.name}

+ {p.name}
${p.prices.price.value}
From a05c15b0029c2f0e078e3d1cfe57b299fb7783e8 Mon Sep 17 00:00:00 2001 From: paco <34928425+pacocoursey@users.noreply.github.com> Date: Thu, 8 Oct 2020 14:17:06 -0600 Subject: [PATCH 07/19] Footer fixes --- components/core/Footer/Footer.module.css | 7 -- components/core/Footer/Footer.tsx | 92 +++++++++++------------- 2 files changed, 43 insertions(+), 56 deletions(-) delete mode 100644 components/core/Footer/Footer.module.css diff --git a/components/core/Footer/Footer.module.css b/components/core/Footer/Footer.module.css deleted file mode 100644 index 573fa35bc..000000000 --- a/components/core/Footer/Footer.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.root { - @apply p-0 bg-black text-white; -} - -.container { - @apply flex justify-between items-center flex-row px-4 py-5; -} diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx index 536dc3006..1a5fe70cc 100644 --- a/components/core/Footer/Footer.tsx +++ b/components/core/Footer/Footer.tsx @@ -1,7 +1,7 @@ import cn from 'classnames' import { FC } from 'react' -import s from './Footer.module.css' -import { Container, Logo } from '@components/ui' +import { Logo } from '@components/ui' +import Link from 'next/link' interface Props { className?: string @@ -9,55 +9,49 @@ interface Props { } const Footer: FC = ({ className }) => { - const rootClassName = cn(s.root, className) + const rootClassName = cn( + 'flex flex-col p-6 md:py-12 md:flex-row bg-black text-white flex-wrap', + className + ) return ( ) } From 6bc416eb74bcfdda122300036995d5bdfeff5cea Mon Sep 17 00:00:00 2001 From: paco <34928425+pacocoursey@users.noreply.github.com> Date: Thu, 8 Oct 2020 14:17:20 -0600 Subject: [PATCH 08/19] Fix some paddings --- components/core/Navbar/Navbar.tsx | 4 ++-- components/ui/Hero/Hero.module.css | 3 --- components/ui/Hero/Hero.tsx | 2 +- pages/index.tsx | 2 +- 4 files changed, 4 insertions(+), 7 deletions(-) diff --git a/components/core/Navbar/Navbar.tsx b/components/core/Navbar/Navbar.tsx index f3ba6763d..740054cf0 100644 --- a/components/core/Navbar/Navbar.tsx +++ b/components/core/Navbar/Navbar.tsx @@ -14,7 +14,7 @@ const Navbar: FC = ({ className }) => { return (
-
+ -
+
diff --git a/components/ui/Hero/Hero.module.css b/components/ui/Hero/Hero.module.css index ee88ea18e..e69de29bb 100644 --- a/components/ui/Hero/Hero.module.css +++ b/components/ui/Hero/Hero.module.css @@ -1,3 +0,0 @@ -.root { - @apply bg-black py-12; -} diff --git a/components/ui/Hero/Hero.tsx b/components/ui/Hero/Hero.tsx index d5df6b1d5..534270063 100644 --- a/components/ui/Hero/Hero.tsx +++ b/components/ui/Hero/Hero.tsx @@ -9,7 +9,7 @@ interface Props { } const Hero: FC = ({ headline, description, className }) => { - const rootClassName = cn(s.root, className) + const rootClassName = cn('bg-black py-12 px-4 md:px-6', className) return (
diff --git a/pages/index.tsx b/pages/index.tsx index 2866e7e4e..8fbbd97aa 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -38,7 +38,7 @@ export default function Home({ variant="secondary" wrapper={(p: any) => } /> -
+
ALL CATEGORIES ACCESSORIES BAGS CLOTHING SHOES ALL DESIGNERS 032c 1017
From 450921bd553afaa7170da370f74c577b17e42d82 Mon Sep 17 00:00:00 2001 From: paco <34928425+pacocoursey@users.noreply.github.com> Date: Thu, 8 Oct 2020 14:20:04 -0600 Subject: [PATCH 09/19] Footer links hover --- components/core/Footer/Footer.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx index 1a5fe70cc..b6cccdd15 100644 --- a/components/core/Footer/Footer.tsx +++ b/components/core/Footer/Footer.tsx @@ -27,19 +27,25 @@ const Footer: FC = ({ className }) => { From d8ff9bc4ff19fd73d27ae755cb768c14b4aa5a98 Mon Sep 17 00:00:00 2001 From: paco <34928425+pacocoursey@users.noreply.github.com> Date: Thu, 8 Oct 2020 14:46:33 -0600 Subject: [PATCH 10/19] Header style improvements --- components/core/Featurebar/Featurebar.module.css | 2 +- components/core/Navbar/Navbar.module.css | 2 +- components/core/UserNav/UserNav.module.css | 6 +++++- components/core/UserNav/UserNav.tsx | 9 ++++++--- components/icon/Bag.tsx | 5 +---- 5 files changed, 14 insertions(+), 10 deletions(-) diff --git a/components/core/Featurebar/Featurebar.module.css b/components/core/Featurebar/Featurebar.module.css index 13214e475..75ee278ba 100644 --- a/components/core/Featurebar/Featurebar.module.css +++ b/components/core/Featurebar/Featurebar.module.css @@ -1,5 +1,5 @@ .separator { - @apply mx-3 bg-white; + @apply mx-3 bg-gray-400; width: 1px; height: 20px; } diff --git a/components/core/Navbar/Navbar.module.css b/components/core/Navbar/Navbar.module.css index a7e7275b1..cc242559f 100644 --- a/components/core/Navbar/Navbar.module.css +++ b/components/core/Navbar/Navbar.module.css @@ -1,3 +1,3 @@ .link { - @apply group text-gray-500 inline-flex items-center text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 cursor-pointer; + @apply group text-gray-500 inline-flex items-center text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-100 cursor-pointer; } diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css index e2a2a0873..6a3cd956f 100644 --- a/components/core/UserNav/UserNav.module.css +++ b/components/core/UserNav/UserNav.module.css @@ -6,7 +6,11 @@ } .item { - @apply mr-6 cursor-pointer relative; + @apply mr-6 cursor-pointer relative transition ease-in-out duration-100; + + &:hover { + @apply text-gray-500; + } &:last-child { @apply mr-0; diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx index 8e4949ba1..da2aed245 100644 --- a/components/core/UserNav/UserNav.tsx +++ b/components/core/UserNav/UserNav.tsx @@ -16,17 +16,20 @@ const countItems = (count: number, items: any[]) => items.reduce(countItem, count) const UserNav: FC = ({ className }) => { - const { openSidebar } = useUI() + const { openSidebar, closeSidebar, displaySidebar } = useUI() const { data } = useCart() const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0) return (
- +
)} diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css index bdc88bb33..28f04386c 100644 --- a/components/ui/Button/Button.module.css +++ b/components/ui/Button/Button.module.css @@ -10,7 +10,7 @@ @apply border-gray-700 shadow-outline; } -.root:active { +.root[data-active] { @apply bg-gray-700; } diff --git a/components/ui/Button/Button.tsx b/components/ui/Button/Button.tsx index 362ade2ae..c8e78fb45 100644 --- a/components/ui/Button/Button.tsx +++ b/components/ui/Button/Button.tsx @@ -1,5 +1,10 @@ import cn from 'classnames' -import React, { ButtonHTMLAttributes } from 'react' +import React, { + ButtonHTMLAttributes, + JSXElementConstructor, + useRef, +} from 'react' +import { useButton } from 'react-aria' import s from './Button.module.css' interface Props extends ButtonHTMLAttributes { @@ -8,47 +13,55 @@ interface Props extends ButtonHTMLAttributes { variant?: 'filled' | 'outlined' | 'flat' | 'none' active?: boolean type?: 'submit' | 'reset' | 'button' + Component?: string | JSXElementConstructor } -export default class Button extends React.Component { - public render() { - const { - className, - variant = 'filled', - children, - disabled = false, - href, - active, - ...rest - } = this.props +const Button: React.FC = (props) => { + const { + className, + variant = 'filled', + children, + href, + active, + onClick, + disabled, + Component = 'button', + ...rest + } = props + const ref = useRef(null) + const { buttonProps, isPressed } = useButton( + { + ...props, + // @ts-ignore onClick === onPress for our purposes + onPress: onClick, + isDisabled: disabled, + elementType: Component, + }, + ref + ) - let Component: React.ComponentType< - React.AnchorHTMLAttributes< - HTMLAnchorElement | HTMLButtonElement | HTMLDivElement - > & - React.ClassAttributes - > = 'a' as any + const rootClassName = cn( + s.root, + { + [s.filled]: variant === 'filled', + }, + className + ) - // Catch for buttons / span / stc. - - const rootClassName = cn( - s.root, - { - [s.filled]: variant === 'filled', - }, - className - ) - - return ( - - {children} - - ) - } + return ( + + {children} + + ) } + +export default Button diff --git a/components/ui/Link/Link.tsx b/components/ui/Link/Link.tsx new file mode 100644 index 000000000..27f30e863 --- /dev/null +++ b/components/ui/Link/Link.tsx @@ -0,0 +1,11 @@ +import NextLink, { LinkProps as NextLinkProps } from 'next/link' + +const Link: React.FC = ({ href, children, ...props }) => { + return ( + + {children} + + ) +} + +export default Link diff --git a/components/ui/Link/index.ts b/components/ui/Link/index.ts new file mode 100644 index 000000000..518d37298 --- /dev/null +++ b/components/ui/Link/index.ts @@ -0,0 +1 @@ +export { default } from './Link' From e1d3ceffc52cfa0669c592d57f5b84c1b25bf089 Mon Sep 17 00:00:00 2001 From: paco <34928425+pacocoursey@users.noreply.github.com> Date: Thu, 8 Oct 2020 15:36:27 -0600 Subject: [PATCH 14/19] Button forward ref --- components/ui/Button/Button.tsx | 8 +++++--- package.json | 1 + yarn.lock | 5 +++++ 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/components/ui/Button/Button.tsx b/components/ui/Button/Button.tsx index c8e78fb45..4a3e3cc66 100644 --- a/components/ui/Button/Button.tsx +++ b/components/ui/Button/Button.tsx @@ -1,9 +1,11 @@ import cn from 'classnames' import React, { + forwardRef, ButtonHTMLAttributes, JSXElementConstructor, useRef, } from 'react' +import mergeRefs from 'react-merge-refs' import { useButton } from 'react-aria' import s from './Button.module.css' @@ -16,7 +18,7 @@ interface Props extends ButtonHTMLAttributes { Component?: string | JSXElementConstructor } -const Button: React.FC = (props) => { +const Button: React.FC = forwardRef((props, buttonRef) => { const { className, variant = 'filled', @@ -54,7 +56,7 @@ const Button: React.FC = (props) => { href={href} aria-pressed={active} data-variant={variant} - ref={ref} + ref={mergeRefs([ref, buttonRef])} {...rest} {...buttonProps} data-active={isPressed ? '' : undefined} @@ -62,6 +64,6 @@ const Button: React.FC = (props) => { {children} ) -} +}) export default Button diff --git a/package.json b/package.json index 115c6c505..467d3f3a6 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "react": "^16.13.1", "react-aria": "^3.0.0", "react-dom": "^16.13.1", + "react-merge-refs": "^1.1.0", "react-ticker": "^1.2.2", "swr": "^0.3.3" }, diff --git a/yarn.lock b/yarn.lock index 6f0c5d67d..ce18c8110 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6698,6 +6698,11 @@ react-is@16.13.1, react-is@^16.8.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-merge-refs@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz#73d88b892c6c68cbb7a66e0800faa374f4c38b06" + integrity sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ== + react-refresh@0.8.3: version "0.8.3" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f" From a2de6cef2e0d93f18538871395369814600abe57 Mon Sep 17 00:00:00 2001 From: paco <34928425+pacocoursey@users.noreply.github.com> Date: Thu, 8 Oct 2020 15:38:06 -0600 Subject: [PATCH 15/19] Fix active style button --- components/ui/Button/Button.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css index 28f04386c..02ea8edd1 100644 --- a/components/ui/Button/Button.module.css +++ b/components/ui/Button/Button.module.css @@ -11,7 +11,7 @@ } .root[data-active] { - @apply bg-gray-700; + @apply bg-gray-200; } s.filled { From ccf607457317e9c5d0706348c714ffc58c010600 Mon Sep 17 00:00:00 2001 From: paco <34928425+pacocoursey@users.noreply.github.com> Date: Thu, 8 Oct 2020 16:20:27 -0600 Subject: [PATCH 16/19] Export button props, improve styling of swatches --- .../product/ProductView/ProductView.tsx | 52 +++++++++++++++---- components/product/Swatch/Swatch.module.css | 18 ++++--- components/product/Swatch/Swatch.tsx | 41 +++++++++++++-- components/ui/Button/Button.module.css | 8 +-- components/ui/Button/Button.tsx | 4 +- components/ui/Button/index.ts | 1 + 6 files changed, 98 insertions(+), 26 deletions(-) diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx index 4117027aa..fccdab80c 100644 --- a/components/product/ProductView/ProductView.tsx +++ b/components/product/ProductView/ProductView.tsx @@ -1,5 +1,5 @@ import cn from 'classnames' -import { FC } from 'react' +import { FC, useState } from 'react' import s from './ProductView.module.css' import { Button } from '@components/ui' import { Swatch } from '@components/product' @@ -24,11 +24,22 @@ interface Props { product: Product } +interface Choices { + size?: string | null + color?: string | null +} + const COLORS: Colors[] = ['pink', 'black', 'white'] +const SIZES = ['s', 'm', 'l', 'xl', 'xxl'] const ProductView: FC = ({ product, productData, className }) => { const addItem = useAddItem() const { openSidebar } = useUI() + const [choices, setChoices] = useState({ + size: null, + color: null, + }) + const addToCart = async () => { // TODO: loading state by awating the promise await addItem({ @@ -38,6 +49,9 @@ const ProductView: FC = ({ product, productData, className }) => { openSidebar() } + const activeSize = choices.size + const activeColor = choices.color + return (
@@ -48,26 +62,44 @@ const ProductView: FC = ({ product, productData, className }) => { {productData.prices}
-
-
+
+

Color

- {COLORS.map((c) => ( - + {COLORS.map((color) => ( + + setChoices((choices) => { + return { ...choices, color } + }) + } + /> ))}

Size

- - - - - + {SIZES.map((size) => { + return ( + + setChoices((choices) => { + return { ...choices, size } + }) + } + /> + ) + })}
diff --git a/components/product/Swatch/Swatch.module.css b/components/product/Swatch/Swatch.module.css index 8eb96e58a..3a795139e 100644 --- a/components/product/Swatch/Swatch.module.css +++ b/components/product/Swatch/Swatch.module.css @@ -1,25 +1,29 @@ .root { - @apply h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 inline-flex items-center justify-center cursor-pointer transition duration-75 ease-in-out; + @apply h-12 w-12 bg-white text-black rounded-full mr-3 inline-flex items-center justify-center cursor-pointer transition duration-75 ease-in-out p-0 shadow-none; +} + +.active.size { + @apply border-black; } -.active, .root:hover { - @apply border-gray-700; + @apply transform scale-110; } .colorViolet { - @apply bg-violet; + @apply bg-violet !important; } .colorPink { - @apply bg-pink; + @apply bg-pink !important; } .colorBlack { - @apply bg-black; + @apply bg-black !important; } .colorWhite, .size { - @apply bg-white; + @apply bg-white !important; + @apply border border-gray-200; } diff --git a/components/product/Swatch/Swatch.tsx b/components/product/Swatch/Swatch.tsx index ad80373af..ea2fcbced 100644 --- a/components/product/Swatch/Swatch.tsx +++ b/components/product/Swatch/Swatch.tsx @@ -2,8 +2,9 @@ import cn from 'classnames' import { FC } from 'react' import s from './Swatch.module.css' import { Colors } from '@components/ui/types' +import Button, { ButtonProps } from '@components/ui/Button' -interface Props { +interface Props extends ButtonProps { className?: string children?: any active?: boolean @@ -11,7 +12,7 @@ interface Props { size?: string } -const Swatch: FC = ({ className, size, color, active }) => { +const Swatch: FC = ({ className, size, color, active, ...props }) => { const rootClassName = cn( s.root, { @@ -24,7 +25,41 @@ const Swatch: FC = ({ className, size, color, active }) => { }, className ) - return {size ? size : null} + + // TODO: technically this is a radio + + return ( + + ) } export default Swatch + +const Check = ( + + + +) diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css index 02ea8edd1..fb72eebe2 100644 --- a/components/ui/Button/Button.module.css +++ b/components/ui/Button/Button.module.css @@ -1,17 +1,17 @@ .root { - @apply cursor-pointer inline-flex px-10 rounded-sm border border-transparent leading-6 text-white bg-black transition ease-in-out duration-150 shadow-sm font-semibold text-center justify-center uppercase py-4 uppercase text-center; + @apply cursor-pointer inline-flex px-10 rounded-sm leading-6 text-white bg-black transition ease-in-out duration-150 shadow-sm font-semibold text-center justify-center uppercase py-4 uppercase text-center focus:outline-none; } .root:hover { - @apply bg-white text-black border-black; + @apply bg-gray-800; } .root:focus { - @apply border-gray-700 shadow-outline; + @apply shadow-outline; } .root[data-active] { - @apply bg-gray-200; + @apply bg-gray-600; } s.filled { diff --git a/components/ui/Button/Button.tsx b/components/ui/Button/Button.tsx index 4a3e3cc66..55c9a157d 100644 --- a/components/ui/Button/Button.tsx +++ b/components/ui/Button/Button.tsx @@ -9,7 +9,7 @@ import mergeRefs from 'react-merge-refs' import { useButton } from 'react-aria' import s from './Button.module.css' -interface Props extends ButtonHTMLAttributes { +export interface ButtonProps extends ButtonHTMLAttributes { href?: string className?: string variant?: 'filled' | 'outlined' | 'flat' | 'none' @@ -18,7 +18,7 @@ interface Props extends ButtonHTMLAttributes { Component?: string | JSXElementConstructor } -const Button: React.FC = forwardRef((props, buttonRef) => { +const Button: React.FC = forwardRef((props, buttonRef) => { const { className, variant = 'filled', diff --git a/components/ui/Button/index.ts b/components/ui/Button/index.ts index 3389ecb83..aa076c58e 100644 --- a/components/ui/Button/index.ts +++ b/components/ui/Button/index.ts @@ -1 +1,2 @@ export { default } from './Button' +export * from './Button' From f9660b4bc23d2ba8cc24d6807b9e7058f2e399b4 Mon Sep 17 00:00:00 2001 From: paco <34928425+pacocoursey@users.noreply.github.com> Date: Thu, 8 Oct 2020 18:00:05 -0600 Subject: [PATCH 17/19] Styling and icon fixes for cart sidebar --- components/cart/CartItem/CartItem.module.css | 2 +- components/cart/CartItem/CartItem.tsx | 16 ++++++++------ .../cart/CartSidebarView/CartSidebarView.tsx | 12 +++++----- components/icon/ArrowLeft.tsx | 22 +++++++++++++++++++ components/icon/Minus.tsx | 15 +++++++++++++ components/icon/Plus.tsx | 22 +++++++++++++++++++ components/icon/index.ts | 3 +++ components/ui/Button/Button.tsx | 5 +++++ components/ui/Sidebar/Sidebar.tsx | 4 ++-- 9 files changed, 85 insertions(+), 16 deletions(-) create mode 100644 components/icon/ArrowLeft.tsx create mode 100644 components/icon/Minus.tsx create mode 100644 components/icon/Plus.tsx diff --git a/components/cart/CartItem/CartItem.module.css b/components/cart/CartItem/CartItem.module.css index b6a8858b1..17715c7dc 100644 --- a/components/cart/CartItem/CartItem.module.css +++ b/components/cart/CartItem/CartItem.module.css @@ -1,6 +1,6 @@ .quantity { appearance: textfield; - @apply w-6 border-gray-300 border mx-3 rounded text-center text-sm; + @apply w-8 border-gray-300 border mx-3 rounded text-center text-sm; } .quantity::-webkit-outer-spin-button, diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx index 4b4d0f01d..94fbff5c9 100644 --- a/components/cart/CartItem/CartItem.tsx +++ b/components/cart/CartItem/CartItem.tsx @@ -1,4 +1,4 @@ -import { Trash } from '@components/icon' +import { Trash, Plus, Minus } from '@components/icon' import { useCommerce } from '@lib/bigcommerce' import useUpdateItem from '@lib/bigcommerce/cart/use-update-item' import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item' @@ -57,27 +57,29 @@ const CartItem = ({ }, [item.quantity]) return ( -
  • +
  • -
    +
    {item.name} -
    +
    -
    +
    {price}
    @@ -49,8 +49,8 @@ const CartSidebarView: FC = () => {
    ) : ( <> -
    -
      +
      +
        {items.map((item) => ( {
      -
      diff --git a/components/icon/ArrowLeft.tsx b/components/icon/ArrowLeft.tsx new file mode 100644 index 000000000..e85b956e6 --- /dev/null +++ b/components/icon/ArrowLeft.tsx @@ -0,0 +1,22 @@ +const ArrowLeft = ({ ...props }) => { + return ( + + + + + ) +} + +export default ArrowLeft diff --git a/components/icon/Minus.tsx b/components/icon/Minus.tsx new file mode 100644 index 000000000..48614cf2d --- /dev/null +++ b/components/icon/Minus.tsx @@ -0,0 +1,15 @@ +const Minus = ({ ...props }) => { + return ( + + + + ) +} + +export default Minus diff --git a/components/icon/Plus.tsx b/components/icon/Plus.tsx new file mode 100644 index 000000000..bb0da6b1f --- /dev/null +++ b/components/icon/Plus.tsx @@ -0,0 +1,22 @@ +const Plus = ({ ...props }) => { + return ( + + + + + ) +} + +export default Plus diff --git a/components/icon/index.ts b/components/icon/index.ts index 2afd43898..047be8be7 100644 --- a/components/icon/index.ts +++ b/components/icon/index.ts @@ -2,3 +2,6 @@ export { default as Bag } from './Bag' export { default as Heart } from './Heart' export { default as Trash } from './Trash' export { default as Cross } from './Cross' +export { default as ArrowLeft } from './ArrowLeft' +export { default as Plus } from './Plus' +export { default as Minus } from './Minus' diff --git a/components/ui/Button/Button.tsx b/components/ui/Button/Button.tsx index 55c9a157d..fbcaf0dac 100644 --- a/components/ui/Button/Button.tsx +++ b/components/ui/Button/Button.tsx @@ -16,6 +16,7 @@ export interface ButtonProps extends ButtonHTMLAttributes { active?: boolean type?: 'submit' | 'reset' | 'button' Component?: string | JSXElementConstructor + width?: string | number } const Button: React.FC = forwardRef((props, buttonRef) => { @@ -27,6 +28,7 @@ const Button: React.FC = forwardRef((props, buttonRef) => { active, onClick, disabled, + width, Component = 'button', ...rest } = props @@ -59,6 +61,9 @@ const Button: React.FC = forwardRef((props, buttonRef) => { ref={mergeRefs([ref, buttonRef])} {...rest} {...buttonProps} + style={{ + width, + }} data-active={isPressed ? '' : undefined} > {children} diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx index cc14baf5b..c292eebc6 100644 --- a/components/ui/Sidebar/Sidebar.tsx +++ b/components/ui/Sidebar/Sidebar.tsx @@ -72,8 +72,8 @@ const Sidebar: FC = ({ className, children, show = true, close }) => { leaveFrom="translate-x-0" leaveTo="translate-x-full" > -
      -
      +
      +
      {children}
      From 6dae061425f3b51b05a83a48035d70496d4fb6a7 Mon Sep 17 00:00:00 2001 From: paco <34928425+pacocoursey@users.noreply.github.com> Date: Thu, 8 Oct 2020 18:37:11 -0600 Subject: [PATCH 18/19] Add error, empty, success states to cart sidebar --- .../cart/CartSidebarView/CartSidebarView.tsx | 59 ++++++++++++++----- components/icon/ArrowLeft.tsx | 11 +++- components/icon/Check.tsx | 21 +++++++ components/icon/index.ts | 1 + components/product/Swatch/Swatch.tsx | 19 +----- tailwind.config.js | 2 + 6 files changed, 78 insertions(+), 35 deletions(-) create mode 100644 components/icon/Check.tsx diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx index a5d014d56..85824e6fb 100644 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ b/components/cart/CartSidebarView/CartSidebarView.tsx @@ -1,7 +1,8 @@ import { FC } from 'react' +import cn from 'classnames' import { UserNav } from '@components/core' import { Button } from '@components/ui' -import { ArrowLeft } from '@components/icon' +import { ArrowLeft, Bag, Cross, Check } from '@components/icon' import { useUI } from '@components/ui/context' import { useCart } from '@lib/bigcommerce/cart' import CartItem from '../CartItem' @@ -15,15 +16,25 @@ const CartSidebarView: FC = () => { console.log('CART', data, isEmpty) + // This should come from the API via hook I guess + const error = null + const success = null + return ( - <> +
      @@ -32,24 +43,42 @@ const CartSidebarView: FC = () => {
      - {isEmpty ? ( -

      - Your cart is currently empty -

      - ) : ( -

      - My Cart -

      - )}
      {isEmpty ? ( -
      - +
      + + + +

      + Your cart is empty. +

      +
      + ) : error ? ( +
      + + + +

      + We couldn’t process the purchase. Please check your card information + and try again. +

      +
      + ) : success ? ( +
      + + + +

      + Thank you for your order. +

      ) : ( <>
      +

      + My Cart +

        {items.map((item) => ( {
      )} - +
      ) } diff --git a/components/icon/ArrowLeft.tsx b/components/icon/ArrowLeft.tsx index e85b956e6..ed80ca7a7 100644 --- a/components/icon/ArrowLeft.tsx +++ b/components/icon/ArrowLeft.tsx @@ -1,16 +1,21 @@ const ArrowLeft = ({ ...props }) => { return ( - + { + return ( + + + + ) +} + +export default Check diff --git a/components/icon/index.ts b/components/icon/index.ts index 047be8be7..725587c69 100644 --- a/components/icon/index.ts +++ b/components/icon/index.ts @@ -5,3 +5,4 @@ export { default as Cross } from './Cross' export { default as ArrowLeft } from './ArrowLeft' export { default as Plus } from './Plus' export { default as Minus } from './Minus' +export { default as Check } from './Check' diff --git a/components/product/Swatch/Swatch.tsx b/components/product/Swatch/Swatch.tsx index ea2fcbced..6b1222850 100644 --- a/components/product/Swatch/Swatch.tsx +++ b/components/product/Swatch/Swatch.tsx @@ -2,6 +2,7 @@ import cn from 'classnames' import { FC } from 'react' import s from './Swatch.module.css' import { Colors } from '@components/ui/types' +import { Check } from '@components/icon' import Button, { ButtonProps } from '@components/ui/Button' interface Props extends ButtonProps { @@ -37,7 +38,7 @@ const Swatch: FC = ({ className, size, color, active, ...props }) => { 'text-black': color === 'white', })} > - {Check} + )} {size} @@ -47,19 +48,3 @@ const Swatch: FC = ({ className, size, color, active, ...props }) => { export default Swatch -const Check = ( - - - -) diff --git a/tailwind.config.js b/tailwind.config.js index 0681596d6..4f0101c02 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -16,6 +16,8 @@ module.exports = { pink: '#FF0080', cyan: '#50E3C2', blue: '#0070F3', + green: '#37B679', + red: '#DA3C3C', primary: '#000', textColor: { primary: '#FFF', From 3cc21205428ae9cff87b0eea31c9f3641c3f5bf0 Mon Sep 17 00:00:00 2001 From: paco <34928425+pacocoursey@users.noreply.github.com> Date: Thu, 8 Oct 2020 18:57:26 -0600 Subject: [PATCH 19/19] Fix footer width --- components/core/Footer/Footer.tsx | 84 ++++++++++++++++--------------- 1 file changed, 43 insertions(+), 41 deletions(-) diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx index b6cccdd15..fe5d0b056 100644 --- a/components/core/Footer/Footer.tsx +++ b/components/core/Footer/Footer.tsx @@ -10,55 +10,57 @@ interface Props { const Footer: FC = ({ className }) => { const rootClassName = cn( - 'flex flex-col p-6 md:py-12 md:flex-row bg-black text-white flex-wrap', + 'flex flex-col p-6 md:py-12 md:flex-row flex-wrap max-w-screen-xl m-auto', className ) return ( - - - - ACME - - +
      + +
      + +
      ) }