aural-ui 2.1.5 → 2.1.7

package/dist/components/thumbnail-tags/index.tsx

@@ -1,34 +1,117 @@
 import React from "react"
+import clsx from "clsx"
+
+import { cn } from "../../lib/utils"
 
 type ThumbnailTagsProps =
   | {
       variant: "promotional"
       text: string
+      classNames?: {
+        container?: string
+        text?: string
+        svg?: {
+          height?: number
+          width?: number
+          className?: string
+        }
+      }
     }
   | {
       variant: "engagement"
       primaryText: string
       secondaryText: string
+      classNames?: {
+        container?: string
+        primaryText?: string
+        secondaryText?: string
+        svg?: {
+          height?: number
+          width?: number
+          className?: string
+        }
+      }
     }
   | {
       variant: "checked" | "top10" | "completed-series"
+      classNames?: {
+        container?: string
+        svg?: {
+          height?: number
+          width?: number
+          className?: string
+        }
+      }
+    }
+  | {
+      variant: "ranked"
+      text: string
+      classNames?: {
+        container?: string
+        text?: string
+        svg?: {
+          height?: number
+          width?: number
+          className?: string
+        }
+      }
     }
 
 export function ThumbnailTags(props: ThumbnailTagsProps) {
-  const { variant } = props
+  const { variant, classNames } = props
+
+  if (variant === "ranked") {
+    return (
+      <div className={cn("flex items-center", classNames?.container)}>
+        <p
+          //cn intentional not used, as it was breaking text-fm-primary
+          className={clsx(
+            "bg-fm-primary-500 text-fm-primary text-fm-md font-fm-brand flex px-1 py-0.5 uppercase",
+            classNames?.text
+          )}
+          style={{
+            clipPath: "polygon(99.5% 0, 0 0, 0 100%, 99.5% 100%, 100% 50%)",
+          }}
+        >
+          {props.text}
+        </p>
+        <svg
+          width={props.classNames?.svg?.width ?? 13.3}
+          height={props.classNames?.svg?.height ?? 25.3}
+          viewBox="0 0 11 23"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={cn("-ml-[4.4px]", props.classNames?.svg?.className)}
+        >
+          <path
+            d="M0.849976 11.5L3.03162 23L4.54529 15.0215L5.50427 21.8496L6.95837 11.5L5.50427 1.15039L4.54529 7.97754L3.03162 0L0.849976 11.5ZM7.47498 11.5L8.20154 20.7002L8.92908 11.5L8.20154 2.2998L7.47498 11.5ZM9.44568 11.5L10.1722 17.25L10.8998 11.5L10.1722 5.75L9.44568 11.5Z"
+            fill="#FA2937"
+          />
+        </svg>
+      </div>
+    )
+  }
+
   if (variant === "promotional") {
     return (
-      <div className="flex h-4 w-14 gap-0.5">
-        <p className="bg-fm-neongreen-500 text-fm-neutral-100 font-fm-brand font-fm-xs text-fm-xs w-11 text-center uppercase">
+      <div className={cn("flex h-4 w-14 gap-0.5", classNames?.container)}>
+        <p
+          //cn intentional not used, as it was breaking text-fm-neutral-100
+          className={clsx(
+            "bg-fm-neongreen-500 text-fm-neutral-100 font-fm-brand text-fm-xs w-11 text-center uppercase",
+            classNames?.text
+          )}
+        >
           {props.text}
         </p>
 
         <svg
-          width="12"
-          height="16"
+          height={props.classNames?.svg?.height ?? 16}
+          width={props.classNames?.svg?.width ?? 12}
           viewBox="0 0 12 16"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
+          className={classNames?.svg?.className}
         >
           <g clipPath="url(#clip0_3_736)">
             <rect
@@ -113,26 +196,28 @@ export function ThumbnailTags(props: ThumbnailTagsProps) {
       </div>
     )
   }
+
   if (variant === "checked") {
     return (
       <svg
-        width="29"
-        height="16"
+        width={props.classNames?.svg?.width ?? 29}
+        height={props.classNames?.svg?.height ?? 16}
         viewBox="0 0 29 16"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
+        className={classNames?.svg?.className}
       >
         <g opacity="0.5">
           <path
             fillRule="evenodd"
             clipRule="evenodd"
-            d="M12 15.5024C8.08937 15.2353 5 11.9784 5 7.99994C5 4.0215 8.08937 0.764629 12 0.497437promotional5.5024Z"
+            d="M12 15.5024C8.08937 15.2353 5 11.9784 5 7.99994C5 4.0215 8.08937 0.764629 12 0.497437V15.5024Z"
             fill="#004719"
           />
           <path
             fillRule="evenodd"
             clipRule="evenodd"
-            d="M4 12.9317C1.71552 12.4529 4.76837e-07 10.4268 4.76837e-07 7.99999C4.76837e-07 5.5732 1.71552 3.5471 4 3.06824promotional2.9317Z"
+            d="M4 12.9317C1.71552 12.4529 4.76837e-07 10.4268 4.76837e-07 7.99999C4.76837e-07 5.5732 1.71552 3.5471 4 3.06824V12.9317Z"
             fill="#004719"
           />
         </g>
@@ -149,25 +234,37 @@ export function ThumbnailTags(props: ThumbnailTagsProps) {
       </svg>
     )
   }
+
   if (variant === "engagement") {
     return (
-      <div className="flex h-4 w-14 gap-0.5">
+      <div className={cn("flex gap-0.5", classNames?.container)}>
         <div className="bg-fm-primary-400 text-fm-primary font-fm-brand flex uppercase">
-          <p className="text-fm-sm flex w-9 items-center justify-center px-1">
+          <p
+            className={cn(
+              "text-fm-sm flex w-fit items-center justify-center px-1",
+              classNames?.primaryText
+            )}
+          >
             {props.primaryText}
           </p>
           <div className="flex w-1.5 items-center justify-center">
-            <span className="rotate-90 text-[5px] leading-none whitespace-nowrap">
+            <span
+              className={cn(
+                "rotate-90 pt-1 text-[6px] leading-none whitespace-nowrap",
+                classNames?.secondaryText
+              )}
+            >
               {props.secondaryText}
             </span>
           </div>
         </div>
         <svg
-          width="9"
-          height="16"
+          width={props.classNames?.svg?.width ?? 9}
+          height={props.classNames?.svg?.height ?? 16}
           viewBox="0 0 9 16"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
+          className={classNames?.svg?.className}
         >
           <g clipPath="url(#clip0_17092_166916)">
             <path
@@ -187,15 +284,16 @@ export function ThumbnailTags(props: ThumbnailTagsProps) {
       </div>
     )
   }
-  //top 10
+
   if (variant === "top10") {
     return (
       <svg
-        width="28"
-        height="20"
+        width={props.classNames?.svg?.width ?? 28}
+        height={props.classNames?.svg?.height ?? 20}
         viewBox="0 0 28 20"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
+        className={classNames?.svg?.className}
       >
         <g clipPath="url(#clip0_3_790)">
           <path
@@ -228,15 +326,15 @@ export function ThumbnailTags(props: ThumbnailTagsProps) {
     )
   }
 
-  // completed series
   if (variant === "completed-series") {
     return (
       <svg
-        width="136"
-        height="16"
+        width={props.classNames?.svg?.width ?? 136}
+        height={props.classNames?.svg?.height ?? 16}
         viewBox="0 0 136 16"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
+        className={classNames?.svg?.className}
       >
         <g opacity="0.5">
           <path
@@ -283,9 +381,15 @@ export function ThumbnailTags(props: ThumbnailTagsProps) {
       </svg>
     )
   }
+
   // Default version
   return (
-    <p className="bg-fm-neongreen-500 text-fm-neutral-100 font-fm-brand font-fm-xs text-fm-xs w-11 text-center uppercase">
+    <p
+      className={cn(
+        "bg-fm-neongreen-500 text-fm-neutral-100 font-fm-brand font-fm-xs text-fm-xs w-11 p-1 text-center uppercase",
+        classNames?.container
+      )}
+    >
       30% off
     </p>
   )