From 1f2f52d307a0658ee826fcf36a6195f69dca650c Mon Sep 17 00:00:00 2001 From: l198881 <82917144+l198881@users.noreply.github.com> Date: Fri, 28 May 2021 10:56:00 -0300 Subject: [PATCH] Update and rename Swatch.tsx to Swatch.ts --- components/product/Swatch/Swatch.ts | 59 ++++++++++++++++++++++++++++ components/product/Swatch/Swatch.tsx | 59 ---------------------------- 2 files changed, 59 insertions(+), 59 deletions(-) create mode 100644 components/product/Swatch/Swatch.ts delete mode 100644 components/product/Swatch/Swatch.tsx diff --git a/components/product/Swatch/Swatch.ts b/components/product/Swatch/Swatch.ts new file mode 100644 index 000000000..863152553 --- /dev/null +++ b/components/product/Swatch/Swatch.ts @@ -0,0 +1,59 @@ + ch 'classnames' + { FC } 'react' + s './Swatch.module.css' + { Check } 'icons' + Button, { ButtonProps } 'uiButton' + { isDark } 'colors' + SwatchProps { + active?: boolean + children?: any + className?: string + variant?: 'size' 'color' string + color?: string + label?: string null +} + + Swatch: FCOmitButtonProps, 'variant' SwatchProps ({ + className, + color '', + label null, + variant 'size', + active, + ...props +}) { + variant variant?.toLowerCase() + + (label) { + label label?.toLowerCase() + } + + swatchClassName cn( + s.swatch, + { + [s.active]: active, + [s.size]: variant 1 'size', + [s.color]: color, + [s.dark]: color ? isDark(color) : true, + [s.textLabel]: !color label label.length 3, + }, + className + ) + + ( + Button + className{swatchClassName} + style{color ? { backgroundColor: color } : {}} + aria-label="Variant Swatch" + {props} + > + {variant 1 'color' active ( + + Check / + + )} + {variant 0 'color' ? label : null} + /Button + ) +} + + Swatch diff --git a/components/product/Swatch/Swatch.tsx b/components/product/Swatch/Swatch.tsx deleted file mode 100644 index 7e8de3e4a..000000000 --- a/components/product/Swatch/Swatch.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import cn from 'classnames' -import { FC } from 'react' -import s from './Swatch.module.css' -import { Check } from '@components/icons' -import Button, { ButtonProps } from '@components/ui/Button' -import { isDark } from '@lib/colors' -interface SwatchProps { - active?: boolean - children?: any - className?: string - variant?: 'size' | 'color' | string - color?: string - label?: string | null -} - -const Swatch: FC & SwatchProps> = ({ - className, - color = '', - label = null, - variant = 'size', - active, - ...props -}) => { - variant = variant?.toLowerCase() - - if (label) { - label = label?.toLowerCase() - } - - const swatchClassName = cn( - s.swatch, - { - [s.active]: active, - [s.size]: variant === 'size', - [s.color]: color, - [s.dark]: color ? isDark(color) : false, - [s.textLabel]: !color && label && label.length > 3, - }, - className - ) - - return ( - - ) -} - -export default Swatch