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