feat: add useful classes to tier selector elements

0xflair · Dec 11, 2022 · 9fcd568 · 9fcd568
1 parent 602c313
commit 9fcd568
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 29 deletions.
diff --git a/packages/react/src/modules/finance/tiered-sales/components/TieredSalesSelector.tsx b/packages/react/src/modules/finance/tiered-sales/components/TieredSalesSelector.tsx
@@ -1,11 +1,10 @@
+import { classNames } from '@flair-sdk/common';
 import { RadioGroup } from '@headlessui/react';
 import { CheckCircleIcon } from '@heroicons/react/solid';
 import { Chain } from '@wagmi/chains';
 import { BigNumber, BigNumberish, ethers } from 'ethers';
 import { useEffect } from 'react';
 
-import { classNames } from '@flair-sdk/common';
-
 import { useChainInfo } from '../../../../common';
 import {
   CryptoSymbol,
@@ -111,11 +110,11 @@ export const TieredSalesSelector = ({
         currencySymbol,
       }: RenderProps) => (
         <>
-          <span className="flex flex-1">
-            <span className="flex flex-col">
+          <span className="tier-item-wrapper flex flex-1">
+            <span className="tier-item-content flex flex-col">
               <RadioGroup.Label
                 as="span"
-                className="block text-sm font-medium text-gray-900"
+                className="tier-metadata block text-sm font-medium text-gray-900"
               >
                 {renderLabel({
                   checked,
@@ -130,15 +129,15 @@ export const TieredSalesSelector = ({
                 {tier.isEligible !== undefined ? (
                   <RadioGroup.Description
                     as="span"
-                    className="mt-1 flex items-center text-xs text-gray-500"
+                    className="tier-eligibility-status mt-1 flex items-center text-xs text-gray-500"
                   >
                     {tier.isEligible ? 'Eligible' : 'Not eligible'}
                   </RadioGroup.Description>
                 ) : null}
               </IfWalletConnected>
               <RadioGroup.Description
                 as="span"
-                className="mt-4 text-sm font-medium text-gray-900"
+                className="tier-price mt-4 text-sm font-medium text-gray-900"
               >
                 {tier.price.toString() ? (
                   <CryptoValue
@@ -155,15 +154,15 @@ export const TieredSalesSelector = ({
           <CheckCircleIcon
             className={classNames(
               !checked ? 'invisible' : '',
-              'h-5 w-5 text-indigo-600',
+              'tier-checked-icon h-5 w-5 text-indigo-600',
             )}
             aria-hidden="true"
           />
           <span
             className={classNames(
               active ? 'border' : 'border-2',
               checked ? 'border-indigo-500' : 'border-transparent',
-              'pointer-events-none absolute -inset-px rounded-lg',
+              'tier-checked-border pointer-events-none absolute -inset-px rounded-lg',
             )}
             aria-hidden="true"
           />
@@ -182,7 +181,7 @@ export const TieredSalesSelector = ({
         <RadioGroup.Label className={titleClassName}>{title}</RadioGroup.Label>
       ) : null}
 
-      <div className="grid grid-cols-1 gap-y-6 sm:grid-cols-3 sm:gap-x-4">
+      <div className="tier-items-list grid grid-cols-1 gap-y-6 sm:grid-cols-3 sm:gap-x-4">
         {visibleTiers.map(([tierId, tier]) => (
           <RadioGroup.Option
             key={tierId}

diff --git a/...ages/react/src/modules/token/erc721/tiered-sales/components/ERC721TieredSalesSelector.tsx b/...ages/react/src/modules/token/erc721/tiered-sales/components/ERC721TieredSalesSelector.tsx
@@ -50,11 +50,11 @@ export const ERC721TieredSalesSelector = (props: Props = {}) => {
           configValues?.['admin:tiered-sales']?.tiers?.[tierId]?.metadataUri;
         return (
           <>
-            <span className="flex flex-1">
-              <span className="flex flex-col">
+            <span className="tier-item-wrapper flex flex-1">
+              <span className="tier-item-content flex flex-col">
                 <RadioGroup.Label
                   as="span"
-                  className="block text-sm font-medium text-gray-900"
+                  className="tier-metadata block text-sm font-medium text-gray-900"
                 >
                   {metadataUri ? (
                     <NftMetadataPreview
@@ -70,15 +70,15 @@ export const ERC721TieredSalesSelector = (props: Props = {}) => {
                   {tier.isEligible !== undefined ? (
                     <RadioGroup.Description
                       as="span"
-                      className="mt-1 flex items-center text-xs text-gray-500"
+                      className="tier-eligibility-status mt-1 flex items-center text-xs text-gray-500"
                     >
                       {tier.isEligible ? 'Eligible' : 'Not eligible'}
                     </RadioGroup.Description>
                   ) : null}
                 </IfWalletConnected>
                 <RadioGroup.Description
                   as="span"
-                  className="mt-4 text-sm font-medium text-gray-900"
+                  className="tier-price mt-4 text-sm font-medium text-gray-900"
                 >
                   {tier.price.toString() ? (
                     <CryptoValue
@@ -95,15 +95,15 @@ export const ERC721TieredSalesSelector = (props: Props = {}) => {
             <CheckCircleIcon
               className={classNames(
                 !checked ? 'invisible' : '',
-                'h-5 w-5 text-indigo-600',
+                'tier-checked-icon h-5 w-5 text-indigo-600',
               )}
               aria-hidden="true"
             />
             <span
               className={classNames(
                 active ? 'border' : 'border-2',
                 checked ? 'border-indigo-500' : 'border-transparent',
-                'pointer-events-none absolute -inset-px rounded-lg',
+                'tier-checked-border pointer-events-none absolute -inset-px rounded-lg',
               )}
               aria-hidden="true"
             />

diff --git a/packages/react/src/modules/token/metadata/components/NftMetadataPreview.tsx b/packages/react/src/modules/token/metadata/components/NftMetadataPreview.tsx
@@ -6,6 +6,7 @@ type Props = {
   uri?: string;
   hideAttributes?: boolean;
   hideDescription?: boolean;
+  className?: string;
 };
 
 export const NftMetadataPreview = ({
@@ -26,16 +27,18 @@ export const NftMetadataPreview = ({
   return (
     <>
       {remoteTokenMetadataLoading ? (
-        <span className="flex gap-2">
+        <span className="metadata-loading flex gap-2">
           <Spinner /> Loading...
         </span>
       ) : remoteTokenMetadataError ? (
-        <Errors
-          title="Could not load metadata from URI"
-          error={remoteTokenMetadataError}
-        />
+        <span className="metadata-error">
+          <Errors
+            title="Could not load metadata from URI"
+            error={remoteTokenMetadataError}
+          />
+        </span>
       ) : !remoteTokenMetadata ? (
-        <span>
+        <span className="metadata-error">
           {uri ? (
             <Errors
               title="Unknown error"
@@ -44,28 +47,28 @@ export const NftMetadataPreview = ({
           ) : null}
         </span>
       ) : (
-        <div className="flex flex-col items-start gap-2">
+        <div className="metadata-wrapper flex flex-col items-start gap-2">
           {remoteTokenMetadata.image ? (
             <img
               src={normalizeIpfsUrl(remoteTokenMetadata.image)}
-              className="h-16 w-16 rounded-md"
+              className="metadata-image h-16 w-16 rounded-md"
             />
           ) : null}
-          <div>
-            <h4 className="text-lg font-bold">
+          <div className="metadata-info">
+            <h4 className="metadata-title text-lg font-bold">
               {remoteTokenMetadata.name || (
                 <span className="italic">No name</span>
               )}
             </h4>
             {!hideDescription && (
-              <p className="mt-1">
+              <p className="metadata-description mt-1">
                 {remoteTokenMetadata.description || (
                   <span className="italic">No description</span>
                 )}
               </p>
             )}
             {!hideAttributes && (
-              <p className="mt-1 text-neutral-700">
+              <p className="metadata-attributes mt-1 text-neutral-700">
                 {remoteTokenMetadata.attributes ? (
                   JSON.stringify(remoteTokenMetadata.attributes)
                 ) : (