4
0
forked from crowetic/commerce
This commit is contained in:
Luis Alvarez 2020-10-19 18:24:02 -05:00
commit 8212cec939
8 changed files with 57 additions and 24 deletions

View File

@ -10,15 +10,15 @@ const ArrowLeft = ({ ...props }) => {
> >
<path <path
d="M19 12H5" d="M19 12H5"
stroke-width="1.5" strokeWidth="1.5"
stroke-linecap="round" strokeLinecap="round"
stroke-linejoin="round" strokeLinejoin="round"
/> />
<path <path
d="M12 19L5 12L12 5" d="M12 19L5 12L12 5"
stroke-width="1.5" strokeWidth="1.5"
stroke-linecap="round" strokeLinecap="round"
stroke-linejoin="round" strokeLinejoin="round"
/> />
</svg> </svg>
) )

View File

@ -10,9 +10,9 @@ const Check = ({ ...props }) => {
> >
<path <path
d="M20 6L9 17L4 12" d="M20 6L9 17L4 12"
stroke-width="2" strokeWidth="2"
stroke-linecap="round" strokeLinecap="round"
stroke-linejoin="round" strokeLinejoin="round"
/> />
</svg> </svg>
) )

View File

@ -4,9 +4,9 @@ const Minus = ({ ...props }) => {
<path <path
d="M5 12H19" d="M5 12H19"
stroke="currentColor" stroke="currentColor"
stroke-width="1.5" strokeWidth="1.5"
stroke-linecap="round" strokeLinecap="round"
stroke-linejoin="round" strokeLinejoin="round"
/> />
</svg> </svg>
) )

View File

@ -4,16 +4,16 @@ const Plus = ({ ...props }) => {
<path <path
d="M12 5V19" d="M12 5V19"
stroke="currentColor" stroke="currentColor"
stroke-width="1.5" strokeWidth="1.5"
stroke-linecap="round" strokeLinecap="round"
stroke-linejoin="round" strokeLinejoin="round"
/> />
<path <path
d="M5 12H19" d="M5 12H19"
stroke="currentColor" stroke="currentColor"
stroke-width="1.5" strokeWidth="1.5"
stroke-linecap="round" strokeLinecap="round"
stroke-linejoin="round" strokeLinejoin="round"
/> />
</svg> </svg>
) )

View File

@ -1,7 +1,6 @@
import { NextSeo } from 'next-seo' import { NextSeo } from 'next-seo'
import { FC, useState } from 'react' import { FC, useState } from 'react'
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product' import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
import { Colors } from '@components/ui/types'
import { useUI } from '@components/ui/context' import { useUI } from '@components/ui/context'
import { Button, Container } from '@components/ui' import { Button, Container } from '@components/ui'
import { Swatch, ProductSlider } from '@components/product' import { Swatch, ProductSlider } from '@components/product'
@ -110,6 +109,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
label={v.label} label={v.label}
onClick={() => { onClick={() => {
setChoices((choices) => { setChoices((choices) => {
console.log(choices)
return { return {
...choices, ...choices,
[opt.displayName]: v.label, [opt.displayName]: v.label,

View File

@ -1,7 +1,7 @@
.root { .root {
@apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
items-center justify-center cursor-pointer transition duration-100 ease-in-out items-center justify-center cursor-pointer transition duration-100 ease-in-out
p-0 shadow-none border-gray-200 border box-border; p-0 shadow-none border-gray-200 border box-border text-black;
} }
.active.size { .active.size {

View File

@ -1,10 +1,9 @@
import cn from 'classnames' 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 { Check } from '@components/icon' import { Check } from '@components/icon'
import Button, { ButtonProps } from '@components/ui/Button' import Button, { ButtonProps } from '@components/ui/Button'
import { isDark } from '@lib/colors'
interface Props { interface Props {
active?: boolean active?: boolean
children?: any children?: any
@ -24,6 +23,7 @@ const Swatch: FC<Props & ButtonProps> = ({
}) => { }) => {
variant = variant?.toLowerCase() variant = variant?.toLowerCase()
label = label?.toLowerCase() label = label?.toLowerCase()
const isDarkBg = isDark(color)
const rootClassName = cn( const rootClassName = cn(
s.root, s.root,
@ -43,8 +43,7 @@ const Swatch: FC<Props & ButtonProps> = ({
{variant === 'color' && active && ( {variant === 'color' && active && (
<span <span
className={cn('absolute', { className={cn('absolute', {
'text-white': label !== 'white', 'text-white': isDarkBg,
'text-black': label === 'white',
})} })}
> >
<Check /> <Check />

View File

@ -14,3 +14,37 @@ export function getRandomPairOfColors() {
// Returns a pair of colors // Returns a pair of colors
return [colors[idx], colors[idx2]] return [colors[idx], colors[idx2]]
} }
function hexToRgb(hex: string = '') {
// @ts-ignore
const match = hex.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i)
if (!match) {
return [0, 0, 0]
}
let colorString = match[0]
if (match[0].length === 3) {
colorString = colorString
.split('')
.map((char: string) => {
return char + char
})
.join('')
}
const integer = parseInt(colorString, 16)
const r = (integer >> 16) & 0xff
const g = (integer >> 8) & 0xff
const b = integer & 0xff
return [r, g, b]
}
export function isDark(color = '') {
// Equation from http://24ways.org/2010/calculating-color-contrast
const rgb = hexToRgb(color)
const res = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000
return res < 128
}