feat: SelectCard disabled state (#4)

weDevsOfficial · Dec 19, 2023 · bfcdce2 · bfcdce2
1 parent 6d8d71c
commit bfcdce2
Show file tree

Hide file tree

Showing 5 changed files with 11,378 additions and 7,834 deletions.
diff --git a/.gitignore b/.gitignore
@@ -26,3 +26,4 @@ storybook-static
 *.sw?
 
 .vercel
+.yarnrc.yml
diff --git a/package.json b/package.json
@@ -79,4 +79,4 @@
     "vite-plugin-dts": "^3.4.0"
   },
   "packageManager": "[email protected]"
-}
+}
diff --git a/src/Components/SelectCard/SelectCard.stories.tsx b/src/Components/SelectCard/SelectCard.stories.tsx
@@ -164,3 +164,99 @@ export const WithCustomRenderItem: Story = {
     ),
   },
 };
+
+export const WithDisabled: Story = {
+  name: 'With Disabled',
+  args: {
+    label: 'Select an option',
+    options: [
+      {
+        key: 'aws',
+        title: 'AWS',
+        icon: (
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 -30 150 150">
+            <path
+              fill="#F90"
+              d="M122.714 62.703c5.28-.643 16.924-2.027 18.997.643 2.072 2.621-2.319 13.649-4.293 18.544-.592 1.484.691 2.077 2.023.94 8.684-7.319 10.954-22.6 9.178-24.825-1.777-2.175-17.023-4.055-26.3 2.473-1.431 1.038-1.184 2.423.395 2.225z"
+            />
+            <path
+              fill="#F90"
+              d="M74.852 89.456c20.28 0 43.865-6.38 60.099-18.396 2.664-1.978.345-4.994-2.369-3.758-18.207 7.714-37.993 11.473-56.003 11.473-26.694 0-52.5-7.368-73.42-19.533-1.827-1.088-3.208.791-1.679 2.176 19.343 17.505 44.951 28.038 73.372 28.038z"
+            />
+            <path
+              fill="#252F3E"
+              d="M42.632 32.835c0 1.83.197 3.313.542 4.401a26.505 26.505 0 0 0 1.58 3.56c.246.396.345.792.345 1.138 0 .495-.296.99-.938 1.484l-3.108 2.077c-.444.296-.889.445-1.283.445-.494 0-.987-.248-1.48-.693a15.29 15.29 0 0 1-1.777-2.324 38.28 38.28 0 0 1-1.53-2.918c-3.848 4.55-8.684 6.825-14.506 6.825-4.145 0-7.45-1.187-9.868-3.56-2.418-2.374-3.652-5.54-3.652-9.495 0-4.204 1.48-7.616 4.49-10.187 3.01-2.572 7.007-3.857 12.09-3.857 1.677 0 3.404.148 5.23.395 1.825.248 3.7.643 5.674 1.088v-3.61c0-3.758-.79-6.379-2.32-7.912-1.578-1.533-4.243-2.274-8.042-2.274-1.727 0-3.503.197-5.329.642a39.247 39.247 0 0 0-5.329 1.682 14.14 14.14 0 0 1-1.727.643c-.345.098-.592.148-.79.148-.69 0-1.036-.494-1.036-1.533V6.577c0-.791.1-1.385.346-1.73.246-.347.69-.693 1.381-1.04 1.727-.89 3.8-1.631 6.217-2.225C20.23.94 22.797.642 25.51.642c5.872 0 10.164 1.336 12.927 4.006 2.714 2.67 4.096 6.726 4.096 12.165v16.022h.099zm-20.033 7.517c1.628 0 3.306-.297 5.082-.89 1.776-.594 3.355-1.682 4.687-3.165.79-.94 1.382-1.978 1.678-3.165.296-1.187.493-2.621.493-4.302v-2.077a41.135 41.135 0 0 0-4.539-.84 37.099 37.099 0 0 0-4.638-.298c-3.306 0-5.724.643-7.352 1.978-1.628 1.336-2.418 3.215-2.418 5.687 0 2.324.592 4.055 1.826 5.242 1.184 1.236 2.911 1.83 5.18 1.83zm39.621 5.34c-.888 0-1.48-.148-1.875-.494-.394-.297-.74-.99-1.036-1.929L47.714 5.044c-.296-.99-.444-1.632-.444-1.978 0-.791.394-1.236 1.184-1.236h4.835c.938 0 1.58.148 1.925.494.395.297.69.99.987 1.929l8.29 32.736 7.697-32.736c.246-.99.542-1.632.937-1.929.395-.297 1.085-.494 1.974-.494h3.947c.938 0 1.579.148 1.974.494.395.297.74.99.937 1.929l7.796 33.132L98.29 4.253c.295-.99.64-1.632.986-1.929.395-.297 1.036-.494 1.925-.494h4.588c.79 0 1.234.395 1.234 1.236 0 .247-.049.494-.099.791a7.041 7.041 0 0 1-.345 1.236L94.688 43.32c-.297.989-.642 1.631-1.037 1.928-.394.297-1.036.495-1.875.495h-4.243c-.938 0-1.58-.149-1.974-.495-.394-.346-.74-.989-.937-1.978l-7.648-31.895-7.599 31.846c-.247.989-.543 1.632-.938 1.978-.394.346-1.085.494-1.973.494H62.22zm63.405 1.336c-2.566 0-5.132-.297-7.599-.89-2.467-.594-4.391-1.237-5.674-1.979-.79-.445-1.332-.94-1.53-1.384a3.503 3.503 0 0 1-.296-1.385v-2.522c0-1.038.395-1.533 1.135-1.533.296 0 .592.05.888.148.296.1.74.297 1.234.495a26.791 26.791 0 0 0 5.428 1.73c1.973.396 3.898.594 5.871.594 3.109 0 5.527-.544 7.204-1.632 1.678-1.088 2.566-2.67 2.566-4.698 0-1.384-.444-2.521-1.332-3.461-.888-.94-2.566-1.78-4.984-2.571l-7.154-2.226c-3.602-1.137-6.267-2.818-7.895-5.044-1.628-2.176-2.467-4.599-2.467-7.17 0-2.077.444-3.907 1.332-5.489.888-1.582 2.072-2.967 3.553-4.055 1.48-1.137 3.157-1.978 5.131-2.571 1.974-.594 4.046-.841 6.217-.841 1.086 0 2.221.05 3.306.198 1.135.148 2.171.346 3.207.544.987.247 1.925.494 2.813.79.888.298 1.579.594 2.072.891.691.396 1.185.791 1.481 1.236.296.396.444.94.444 1.632V8.16c0 1.039-.395 1.583-1.135 1.583-.395 0-1.036-.198-1.875-.594-2.813-1.285-5.971-1.928-9.474-1.928-2.812 0-5.033.445-6.562 1.384-1.53.94-2.319 2.374-2.319 4.402 0 1.384.493 2.57 1.48 3.51s2.812 1.88 5.427 2.72l7.007 2.226c3.553 1.137 6.118 2.72 7.648 4.747 1.53 2.027 2.27 4.351 2.27 6.923 0 2.126-.444 4.055-1.283 5.736-.888 1.681-2.072 3.165-3.602 4.352-1.53 1.236-3.355 2.126-5.477 2.769-2.22.692-4.54 1.039-7.056 1.039z"
+            />
+          </svg>
+        ),
+        disabled: false,
+      },
+      {
+        key: 'gcp',
+        title: 'Google Cloud',
+        icon: (
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
+            <path
+              fill="#EA4335"
+              d="m10.313 5.376 1.887-1.5-.332-.414a5.935 5.935 0 0 0-5.586-1.217 5.89 5.89 0 0 0-3.978 4.084c-.03.113.312-.098.463-.056l2.608-.428s.127-.124.201-.205c1.16-1.266 3.126-1.432 4.465-.354l.272.09z"
+            />
+            <path
+              fill="#4285F4"
+              d="M13.637 6.3a5.835 5.835 0 0 0-1.77-2.838l-1.83 1.82a3.226 3.226 0 0 1 1.193 2.564v.323c.9 0 1.63.725 1.63 1.62 0 .893-.73 1.619-1.63 1.619l-3.257-.003-.325.035v2.507l.325.053h3.257a4.234 4.234 0 0 0 4.08-2.962A4.199 4.199 0 0 0 13.636 6.3z"
+            />
+            <path
+              fill="#34A853"
+              d="M4.711 13.999H7.97v-2.594H4.71c-.232 0-.461-.066-.672-.161l-.458.14-1.313 1.297-.114.447a4.254 4.254 0 0 0 2.557.87z"
+            />
+            <path
+              fill="#FBBC05"
+              d="M4.711 5.572A4.234 4.234 0 0 0 .721 8.44a4.206 4.206 0 0 0 1.433 4.688l1.89-1.884a1.617 1.617 0 0 1 .44-3.079 1.63 1.63 0 0 1 1.714.936l1.89-1.878A4.24 4.24 0 0 0 4.71 5.572z"
+            />
+          </svg>
+        ),
+        disabled: true,
+      },
+      {
+        key: 'do',
+        title: 'Digital Ocean',
+        icon: (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            id="Layer_1"
+            x="0"
+            y="0"
+            version="1.1"
+            viewBox="65.2 173.5 180 180"
+            fill="#0080FF"
+          >
+            <defs />
+            <g id="XMLID_229_">
+              <g id="XMLID_690_">
+                <g id="XMLID_691_">
+                  <g id="XMLID_44_">
+                    <g id="XMLID_48_">
+                      <path
+                        id="XMLID_49_"
+                        d="M155.2 351.7v-34.2c36.2 0 64.3-35.9 50.4-74-5.1-14.1-16.4-25.4-30.5-30.5-38.1-13.8-74 14.2-74 50.4H67c0-57.7 55.8-102.7 116.3-83.8 26.4 8.3 47.5 29.3 55.7 55.7 18.9 60.6-26 116.4-83.8 116.4z"
+                      />
+                    </g>
+                    <path id="XMLID_47_" d="M155.3 317.6h-34v-34h34z" />
+                    <path id="XMLID_46_" d="M121.3 343.8H95.1v-26.2h26.2z" />
+                    <path id="XMLID_45_" d="M95.1 317.6H73.2v-21.9h21.9v21.9z" />
+                  </g>
+                </g>
+              </g>
+            </g>
+          </svg>
+        ),
+        disabled: true,
+      },
+    ],
+    renderItem: (item) => (
+      <div className="w-20 flex flex-col items-center justify-between gap-4">
+        <div className="w-12">{item.icon}</div>
+        <h4 className="block text-xs font-medium text-gray-900">{item.title}</h4>
+      </div>
+    ),
+  },
+};
diff --git a/src/Components/SelectCard/SelectCard.tsx b/src/Components/SelectCard/SelectCard.tsx
@@ -7,6 +7,7 @@ interface Option {
   key: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [key: string]: any;
+  disabled?: boolean;
 }
 
 interface SelectCardProps {
@@ -18,7 +19,7 @@ interface SelectCardProps {
   selectedKey?: string;
   className?: string;
   onChange?: (selectedOption: Option) => void;
-  renderItem: (item: Option) => React.ReactNode;
+  renderItem: (option: Option) => React.JSX.Element;
 }
 
 const SelectCard = ({
@@ -41,6 +42,10 @@ const SelectCard = ({
   });
 
   const handleChange = (option: Option) => {
+    if (option.disabled) {
+      return;
+    }
+
     setSelectedOption(option);
 
     if (onChange) {
@@ -62,9 +67,10 @@ const SelectCard = ({
         {options.map((option: Option, index: React.Key | null | undefined) => (
           <div
             key={index}
-            className={classNames(
+            className={twMerge(
               selectedOption.key === option.key ? 'border-indigo-600' : 'border-gray-200',
-              'relative flex cursor-pointer text-center rounded-lg border-2 p-4 bg-white focus:outline-none'
+              'relative flex cursor-pointer text-center rounded-lg border-2 p-4 bg-white focus:outline-none',
+              option.disabled ? 'opacity-75 cursor-not-allowed grayscale' : '',
             )}
             onClick={() => handleChange(option)}
           >
Original file line number	Diff line number	Diff line change
Expand Up		@@ -26,3 +26,4 @@ storybook-static
		*.sw?

		.vercel
		.yarnrc.yml
-Original file line number
+Diff line change
@@ Expand Up / @@ -79,4 +79,4 @@ @@
         "vite-plugin-dts": "^3.4.0"
       },
       "packageManager": "[email protected]"
-    }
+    }