forked from crowetic/commerce
Export button props, improve styling of swatches
This commit is contained in:
parent
a2de6cef2e
commit
ccf6074573
@ -1,5 +1,5 @@
|
|||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import { FC } from 'react'
|
import { FC, useState } from 'react'
|
||||||
import s from './ProductView.module.css'
|
import s from './ProductView.module.css'
|
||||||
import { Button } from '@components/ui'
|
import { Button } from '@components/ui'
|
||||||
import { Swatch } from '@components/product'
|
import { Swatch } from '@components/product'
|
||||||
@ -24,11 +24,22 @@ interface Props {
|
|||||||
product: Product
|
product: Product
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface Choices {
|
||||||
|
size?: string | null
|
||||||
|
color?: string | null
|
||||||
|
}
|
||||||
|
|
||||||
const COLORS: Colors[] = ['pink', 'black', 'white']
|
const COLORS: Colors[] = ['pink', 'black', 'white']
|
||||||
|
const SIZES = ['s', 'm', 'l', 'xl', 'xxl']
|
||||||
|
|
||||||
const ProductView: FC<Props> = ({ product, productData, className }) => {
|
const ProductView: FC<Props> = ({ product, productData, className }) => {
|
||||||
const addItem = useAddItem()
|
const addItem = useAddItem()
|
||||||
const { openSidebar } = useUI()
|
const { openSidebar } = useUI()
|
||||||
|
const [choices, setChoices] = useState<Choices>({
|
||||||
|
size: null,
|
||||||
|
color: null,
|
||||||
|
})
|
||||||
|
|
||||||
const addToCart = async () => {
|
const addToCart = async () => {
|
||||||
// TODO: loading state by awating the promise
|
// TODO: loading state by awating the promise
|
||||||
await addItem({
|
await addItem({
|
||||||
@ -38,6 +49,9 @@ const ProductView: FC<Props> = ({ product, productData, className }) => {
|
|||||||
openSidebar()
|
openSidebar()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const activeSize = choices.size
|
||||||
|
const activeColor = choices.color
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={cn(s.root, className)}>
|
<div className={cn(s.root, className)}>
|
||||||
<div className="absolute">
|
<div className="absolute">
|
||||||
@ -48,26 +62,44 @@ const ProductView: FC<Props> = ({ product, productData, className }) => {
|
|||||||
{productData.prices}
|
{productData.prices}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 h-full p-24">
|
<div className="flex-1 h-48 p-24">
|
||||||
<div className="bg-violet h-full"></div>
|
<div className="bg-violet h-48"></div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 flex flex-col">
|
<div className="flex-1 flex flex-col">
|
||||||
<section className="pb-4">
|
<section className="pb-4">
|
||||||
<h2 className="uppercase font-medium">Color</h2>
|
<h2 className="uppercase font-medium">Color</h2>
|
||||||
<div className="flex flex-row py-4">
|
<div className="flex flex-row py-4">
|
||||||
{COLORS.map((c) => (
|
{COLORS.map((color) => (
|
||||||
<Swatch key={c} color={c} />
|
<Swatch
|
||||||
|
key={color}
|
||||||
|
color={color}
|
||||||
|
active={color === activeColor}
|
||||||
|
onClick={() =>
|
||||||
|
setChoices((choices) => {
|
||||||
|
return { ...choices, color }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section className="pb-4">
|
<section className="pb-4">
|
||||||
<h2 className="uppercase font-medium">Size</h2>
|
<h2 className="uppercase font-medium">Size</h2>
|
||||||
<div className="flex flex-row py-4">
|
<div className="flex flex-row py-4">
|
||||||
<Swatch size="S" />
|
{SIZES.map((size) => {
|
||||||
<Swatch size="M" />
|
return (
|
||||||
<Swatch size="L" />
|
<Swatch
|
||||||
<Swatch size="XL" />
|
size={size.toUpperCase()}
|
||||||
<Swatch size="XXL" />
|
key={`size-${size}`}
|
||||||
|
active={size === activeSize}
|
||||||
|
onClick={() =>
|
||||||
|
setChoices((choices) => {
|
||||||
|
return { ...choices, size }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section className="pb-12">
|
<section className="pb-12">
|
||||||
|
@ -1,25 +1,29 @@
|
|||||||
.root {
|
.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 {
|
.root:hover {
|
||||||
@apply border-gray-700;
|
@apply transform scale-110;
|
||||||
}
|
}
|
||||||
|
|
||||||
.colorViolet {
|
.colorViolet {
|
||||||
@apply bg-violet;
|
@apply bg-violet !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.colorPink {
|
.colorPink {
|
||||||
@apply bg-pink;
|
@apply bg-pink !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.colorBlack {
|
.colorBlack {
|
||||||
@apply bg-black;
|
@apply bg-black !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.colorWhite,
|
.colorWhite,
|
||||||
.size {
|
.size {
|
||||||
@apply bg-white;
|
@apply bg-white !important;
|
||||||
|
@apply border border-gray-200;
|
||||||
}
|
}
|
||||||
|
@ -2,8 +2,9 @@ import cn from 'classnames'
|
|||||||
import { FC } from 'react'
|
import { FC } from 'react'
|
||||||
import s from './Swatch.module.css'
|
import s from './Swatch.module.css'
|
||||||
import { Colors } from '@components/ui/types'
|
import { Colors } from '@components/ui/types'
|
||||||
|
import Button, { ButtonProps } from '@components/ui/Button'
|
||||||
|
|
||||||
interface Props {
|
interface Props extends ButtonProps {
|
||||||
className?: string
|
className?: string
|
||||||
children?: any
|
children?: any
|
||||||
active?: boolean
|
active?: boolean
|
||||||
@ -11,7 +12,7 @@ interface Props {
|
|||||||
size?: string
|
size?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const Swatch: FC<Props> = ({ className, size, color, active }) => {
|
const Swatch: FC<Props> = ({ className, size, color, active, ...props }) => {
|
||||||
const rootClassName = cn(
|
const rootClassName = cn(
|
||||||
s.root,
|
s.root,
|
||||||
{
|
{
|
||||||
@ -24,7 +25,41 @@ const Swatch: FC<Props> = ({ className, size, color, active }) => {
|
|||||||
},
|
},
|
||||||
className
|
className
|
||||||
)
|
)
|
||||||
return <span className={rootClassName}>{size ? size : null}</span>
|
|
||||||
|
// TODO: technically this is a radio
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button className={rootClassName} {...props}>
|
||||||
|
{color && active && (
|
||||||
|
<span
|
||||||
|
className={cn('absolute', {
|
||||||
|
'text-white': color !== 'white',
|
||||||
|
'text-black': color === 'white',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{Check}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{size}
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Swatch
|
export default Swatch
|
||||||
|
|
||||||
|
const Check = (
|
||||||
|
<svg
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M20 6L9 17L4 12"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
@ -1,17 +1,17 @@
|
|||||||
.root {
|
.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 {
|
.root:hover {
|
||||||
@apply bg-white text-black border-black;
|
@apply bg-gray-800;
|
||||||
}
|
}
|
||||||
|
|
||||||
.root:focus {
|
.root:focus {
|
||||||
@apply border-gray-700 shadow-outline;
|
@apply shadow-outline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.root[data-active] {
|
.root[data-active] {
|
||||||
@apply bg-gray-200;
|
@apply bg-gray-600;
|
||||||
}
|
}
|
||||||
|
|
||||||
s.filled {
|
s.filled {
|
||||||
|
@ -9,7 +9,7 @@ import mergeRefs from 'react-merge-refs'
|
|||||||
import { useButton } from 'react-aria'
|
import { useButton } from 'react-aria'
|
||||||
import s from './Button.module.css'
|
import s from './Button.module.css'
|
||||||
|
|
||||||
interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
|
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||||
href?: string
|
href?: string
|
||||||
className?: string
|
className?: string
|
||||||
variant?: 'filled' | 'outlined' | 'flat' | 'none'
|
variant?: 'filled' | 'outlined' | 'flat' | 'none'
|
||||||
@ -18,7 +18,7 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|||||||
Component?: string | JSXElementConstructor<any>
|
Component?: string | JSXElementConstructor<any>
|
||||||
}
|
}
|
||||||
|
|
||||||
const Button: React.FC<Props> = forwardRef((props, buttonRef) => {
|
const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
|
||||||
const {
|
const {
|
||||||
className,
|
className,
|
||||||
variant = 'filled',
|
variant = 'filled',
|
||||||
|
@ -1 +1,2 @@
|
|||||||
export { default } from './Button'
|
export { default } from './Button'
|
||||||
|
export * from './Button'
|
||||||
|
Loading…
x
Reference in New Issue
Block a user